说明:

  1.     首先token是一定会失效的,至于什么时候失效,这个是由后端的人来决定的<br />        我们调用接口的时候,携带token,服务器发现我们token是失效的,那么就会给我们一个约定好的状态码,就是如果token失效了就告诉我们一个状态码 (比如10002) 这里的10002只是用来举例子,具体要看后端约定的什么值<br />模拟token失效: 在vuex里面故意把token改坏掉,再次发送请求就会出现token失效,:
  3.         ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624428859382-69d8523a-aa82-4359-8cef-c6c1fa0d701b.png#clientId=uf124a0b3-4c31-4&from=paste&height=138&id=ua006c390&margin=%5Bobject%20Object%5D&name=image.png&originHeight=138&originWidth=421&originalType=binary&ratio=1&size=64216&status=done&style=none&taskId=uece5c7c4-0280-4a8d-81a4-527adc502d9&width=421)

小总结:

  1.      后端：收到用户访问某个接口时，检查当前token是否失效，如果token已经失效，返给前端一<br />                    个约定好的状态码 **10002**<br />         前端：在**响应拦截器**中，分析接口的返回值，如果状态码为10002， 则进行token失效操作

那么我们如何去处理呢token失效呢?

只要后端一报错还报的是10002的错,前端就知道是401 ,就可以在响应拦截器里面处理401错误,补充自定义的逻辑(如果犯的错误是10002 就要搞token失效)

要注意一点: token失效不代表没有token.如果你写了路由守卫功能的’如果有token就不能去登录页这个功能的话,’ 那你得先把token删除才能跳到登录页,不然一直跳不过去的

解释说明:

  1. // 引入路由
  2. import router from '@/router'
  4. // 响应拦截器中
  5. //  1. 根据后端返回数据判断本次操作是否成功,不成功主动报错
  6. //  2. 如果成功，只返回有效数据
  7. service.interceptors.response.use(
  8.   response => {
  9.     // 后端和前端的约定：success=true表示请求成功
  10.     if (response.data.success) {
  11.       return response.data
  12.     } else {
  13.       // 如果success为false 业务出错,直接触发reject
  14.       // 被catch分支捕获
  15.       return Promise.reject(new Error(response.data.message))
  16.     }
  17.   },
  18.   -------->   token失效响应拦截器的处理:  
  19.   async error => {
  20.     console.log('请求出错啦', error)
  21.     if (error.response.data.code === 10002) {  // 这里的10002根据后端给我们的状态码来写
  22.       console.log('token失效')
  24.       这里要做的事情就是删除token以及删除用户信息 这个思路是固定的
  25.       await store.dispatch('user/logout') // 调用actions(内容不是固定的)
  27.       // .vue -- this.$route.fullPath
  28.       //  .js -- router.currentRoute.fullPath
  30.       // token失效跳转到login让它登录,登录成功又跳回目标页面
  31.       router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
  32.     }
  33.     console.dir(error)
  34.     return Promise.reject(error)
  35.   }
  36. )

以上方案为后端主导的方案，前端只需要拿到错误码做业务处理即可，此方案也是常用且安全的最优方案

// .vue — this.$route.fullPath

// .js — router.currentRoute.fullPath