401错误 & 解决方法:响应拦截器

---

关于401错误

 

401错误场景

1. 用户未登录,代码报401,应该回到登录页

2. 登录用户的token过期 :

怎样理解token过期?

. 就是登录成功了以后,后端会返回一个token值,这个值在后续请求时带上（就像是开门钥匙),

但是，这个值一般会有有效期（具体是多长，是由后端决定）token过期是为了安全起见

 

refresh_token

说明 : 当用户登陆成功之后，返回的token中有两个值

图示说明:

作用:

---

响应拦截器

 

说明

响应拦截器可以解决401错误

 

响应拦截器的功能

所有从后端回来的响应都会集中进入响应拦截器中,如果发生401错误就可以解决

 

图示说明

 

代码演示

import router from '../router/auth.js'


// 响应拦截器
request.interceptors.response.use(function (response) {
  console.log('响应拦截器', response)
  return response
}, async function (error) {
  // 如果发生了错误，判断是否是401
  console.dir(error)
  if (error.response.status === 401) {
    // 出现401就在这里面 开始处理 ---
    console.log('响应拦截器-错误-401')
    const refreshToken = store.state.tokenInfo.refresh_token
    // if (有refresh_token) {       ---- 有refresh_token
    if (refreshToken) {
      // 1. 请求新token
      try {
        const res = await axios({
          url: 'http://localhost:8000/v1_0/authorizations',
          method: 'PUT',
          headers: {
            Authorization: `Bearer ${refreshToken}`
          }
        })
        console.log('请求新token', res.data.data.token)
        // 2. 保存到vuex
        store.commit('mSetToken', {   // mSetToken是前面定义的mutations名字
          refresh_token: refreshToken,
          token: res.data.data.token
        })
        // 3. 重发请求
        //    request是上面创建的axios的实例，它会自动从vuex取出token带上
        return request(error.config)
      } catch (error) {
        // 1. 清除token
        store.commit('mSetToken', {})  
        // 2. 去到登录页(如果有token值，就不能到login)
        const backtoUrl = encodeURIComponent(router.currentRoute.fullPath)
        router.push('/login?backto=' + backtoUrl)  
        return Promise.reject(error) 
      }
    } else {
       // 如果没有refresh_token的时候   ----没有refresh_token
      // 1.去到登录页
      // 2.清除token
      store.commit('mSetToken', {})
      const backtoUrl = encodeURIComponent(router.currentRoute.fullPath)  // 回到原来跳过来的的页面,不加?后面的一串就会到首页
      router.push('/login?backto=' + backtoUrl)
      return Promise.reject(error)  // 返回错误信息
    }
  } else {
    return Promise.reject(error)
  }
})

原理

 

它的执行顺序是: 请求接口 --> 发生401报错 --> 判断是否有refresh_token -->如果有就用fresh_token请求新的token --> 后台成功返回一个新的token给我们 --> 更新vuex --> 然后重新发送请求 --> 带上新的token请求数据

如果是异常情况: 就是没有fresh_token的情况