后台报401，怎么处理

1、401状态码的含义

axios向服务器端发送请求时，服务器端有些api接口要求传递token，token失效或没有传递，就会报401错误

• 服务端要求传递token信息，而实际发送请求时没有传递。
• 发送请求时有传递token到达服务器端，但由于时间比较久，这个token在服务器中已经过期了(服务器存储token有效期时间为2个小时)

2、401状态码的处理（1）

• 在axios请求拦截器中做token传递操作。
• 可以这样设置，在axios响应拦截器中判断请求状态如果是401，就强制用户重新登录系统

 1 // 引入路由
 2 import router from '@/router'
 3 // 配置响应拦截器
 4 axios.interceptors.response.use(function (response) {
 5   // 正常响应处理
 6   return response
 7 }, function (error) {
 8   // 非正常响应处理(包括401)
 9   // console.dir(error) // 对象： config request response isAxiosError toJSON
10   if (error.response.status === 401) {
11     // token失效(token在服务器端已经失效了，2个小时时效)
12     // 强制用户重新登录系统，以刷新服务器端的token时效
13     router.push('/login')
14     // 不要给做错误提示了
15     return new Promise(function () {}) // 空的Promise对象，没有机会执行catch，进而不做错误提示了
16   }
17   // return new Promise((resolve,reject)=>{
18   // reject('获得文章失败！')
19   // })
20   return Promise.reject(error)
21 })

注意：

1. 路由对象.push(xxx) 可以实现编程式导航。

2. 路由对象：在组件中是 this.$router ，在main.js/ax.js文件中就是router对象(需要import导入)。

模拟服务器端token失效步骤：

• 删除客户端sessionStorage数据。
• 暂时屏蔽守卫代码(开发完毕再打开)

3、401状态码的处理（2）

• 可以在axios请求拦截器中做token传递操作
• 判断refresh_token是否存在，不存在就直接重新登录。存在，axios发起请求，带着refresh_token请求服务端，获取新token出来

　　成功：对vuex和localStorage进行token信息更新。失败：清空无效用户信息，直接重新登录

　　服务器端返回两个秘钥信息，它们在服务端都有使用时效

• • token 有效期2小时。
  • refresh_token 有效期14天，refresh_token用于在token过期后，重新获取并刷新token时效使用的

import store from '@/store' // 引入vuex中的store实例
import router from '@/router' // 引入路由对象实例
……
// 响应拦截器
instance.interceptors.response.use(
  function (response) {
    try {
      // 返回具体有价值的业务数据
      return response.data.data
    } catch (error) {
      return response.data
    }
  },
  async function (error) {
    // 响应有错误，有可能错误状态码为401
    if (error.response && error.response.status === 401) {
      // 定义登录路由对象
      let toPath = {
        name: 'login',
        query: { redirectUrl: router.currentRoute.path }
      } // 跳转对象
      // 如果refresh_token不存在
      if (!store.state.user.refresh_token) {
        router.push(toPath)
        return Promise.reject(error)
      }
      try {
        // 刷新用户token
        // 应该发送一个请求 换取新的token
        // 这里不应该再用instance  因为 instance会再次进入拦截器  用默认的axios
        let result = await axios({
          method: 'put',
          url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
          headers: {
            Authorization: `Bearer ${store.state.user.refresh_token}`
          }
        })
        // 获取到新token后，就对vuex和localStorage进行更新
        store.commit('updateUser', {
          token: result.data.data.token, // 拿到新的token之后
          refresh_token: store.state.user.refresh_token // 将之前 refresh_token 14天有效期
        })
        return instance(error.config) // 把刚才错误的请求再次发送出去 然后将promise返回
      } catch (err) {
        // 如果错误 表示补救措施也没用了(有可能refresh_token也失效了)
        // 应该跳转到登录页 并且 把废掉的用户信息全都干掉
        store.commit('clearUser') // 所有的用户信息清空
        router.push(toPath) // 跳转到回登录页
        return Promise.reject(err)
      }
    }
    return Promise.reject(error)
  }
)
') // 所有的用户信息清空
        router.push(toPath) // 跳转到回登录页
        return Promise.reject(err)
      }
    }
    return Promise.reject(error)
  }
)