31.(前端)响应拦截器设置_前端响应拦截器

1.响应拦截器的使用

设置一个响应的拦截器，用于处理token是否有效。如果有效，就跳转到想访问的页面；如果无效，就跳转到登录页面

2.查看响应返回的数据

首先，我们应该查看发送请求后，响应返回来的token放在哪

// 设置一个响应的拦截器，用于处理token是否有效。如果有效，就跳转到想访问的页面；如果无效，就跳转到登录页面
axios.interceptors.request.use(
  response => {
    console.log(response)   //测试返回的数据，查看token放在哪
    return response
  }
)
1
2
3
4
5
6
7
8

3.处理token失效或者假的token

1. 设置拦截器
2. 查看状态码（后端设置过假token和失效token）（通过状态码确定是什么样的token）
3. 如果是以上两种情况：1.移除这个token 2.修改访问路径

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
// import './assets/css/global.css'
// 引入element-ui
import './plugins/element.js'
// 引入axios：用于登录操作传递数据给后端
import axios from 'axios'
// 引入qs，把登录的参数转成字符串
import qs from 'qs'

// import VueRouter from "vue-router";

Vue.config.productionTip = false
// 给Login.vue 传递axios，使用this就可以获得到.$后是任意写
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs
// 设置默认传递给的地址
// axios.defaults.baseURL = 'http://localhost:5000'

// 设置一个请求拦截器，来设置token
axios.interceptors.request.use(
  // 拦截器第一步：定义函数
  config => {
    // 第二步：获取token，从sessionStorage中
    const tokenStr = window.sessionStorage.getItem('token')
    // console.log(tokenStr);
    // 第三步，验证tokenStr是否为空，如果为空就直接返回，不为空就传递给请求头
    if (tokenStr) {
      // console.log(tokenStr);
      config.headers.token = tokenStr
    }
    // console.log(config.headers.token);
    return config
  }
)

// 设置一个响应的拦截器，用于处理token是否有效。如果有效，就跳转到想访问的页面；如果无效，就跳转到登录页面
axios.interceptors.request.use(
  response => {
    // console.log(response)   //测试返回的数据，查看token放在哪
    // 只要是失效或者假的token，那就更改他的访问路径，让他直接访问登录界面
    // 10016 10017分别是在后端设置的虚假token或者是失效token的状态码
    if ( response.data.status === 10016 || response.data.status === 10017){
      // 从sessionStorage移除他的token值
      window.sessionStorage.removeItem('token')
      // 使用router中的replace修改访问路径
      router.replace({
        path:'/login'
      })
    }
    return response
  }
)


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61