401 token 过期应该如何处理呢？？

有两种解决方案：

我这边主要是针对react项目来处理的，vue的逻辑也差不多。

方法1：

此方法大多用于后台管理类型的，因为用的大部分都是自己人，不是很在意用户体验。

基本的步骤如下：

响应拦截中拦截401信息判断有无token提示用户身份认证过期强制跳转至登录页面

代码如下：

// 添加响应拦截器instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response},function (error) {// 对响应错误做点什么// 在这边有一个特殊情况 -// 如果没有网络的话，直接去 response 里面是空的，下边的.status就会报错// 所以这里需要再加一个判断if (!error.response) {Toast.show({icon:file, message: '网络异常'})return Promise.reject(error)}// 判断 状态码if (error.response.status === 401) {// 如果 === 401，说明用户访问需要登录才可以访问的页面 或者 token过期了// 判断有没有 token// 如果没有 tokenif (!token) {// 1. 提示用户return Toast.show({icon:file, message: '请先进行登录'})// 2. 跳转至登录页面history.push('/login')} else {// 如果有 token ，但是过期了// 1. 提示用户Toast.show({icon:file, message: '身份认证过期，请重新登录'})// 2. 清除 token 信息removeToken()// 3. 退回到登录页面history.push('/login')}} return Promise.reject(error)})

方法2(双token)：

顾名思义，就是有两个token。

这个方法一般用于C端，更加在意用户体验，用户体验更好。

响应拦截中拦截 401 信息判断有无token判断有没有refresh-token提示用户身份认证过期使用refresh-token重新发起请求获取新的token,然后替换token

我这边有一张图，可以帮助大家更直观的了解双token的执行过程。

具体的代码如下：

/ 添加响应拦截器instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response},async function (error) {// 对响应错误做点什么// 这个是没有网络的情况if (!error.response) {Toast.show({icon:file, message: '网络异常'})return Promise.reject(error)}const {refresh_token } = getToken()// 这个是 token 过期 或者访问需要权限的页面if (error.response.status === 401) {// 说明 token 过期// 判断 有没有 refresh_tokenif (!refresh_token) {// 没有 refresh_token，重新登录history.push({pathname: '/login',state: {from: history.location.pathname }})return Promise.reject(error)}try {// 如果有 refresh_token， 就发一个新的请求，// 带上这个 refresh_token，来获取一个新的 token// 这里的接口是后端定义的特殊接口const res = await axios.put(baseURL + 'authorizations', null, {headers: {Authorization: 'bearer ' + refresh_token}})const newToken = {token: res.data.data.token, refresh_token }// 然后把接收的这个新的token，重新设置一下setToken(newToken)store.dispatch({type: 'login/token',payload: newToken})// 重发一次请求// resError 的 config 里面是失败的请求的信息，可以通过 instance 重新发一次请求return instance(error.config)} catch (err) {// 这里是有token，但是token 过期了，也需要重新回退到登录页面// 提示一下用户Toast.show({icon:file, message: '身份认证过期，请重新登录'})history.push({pathname: '/login',state: {from: history.location.pathname }})return Promise.reject(error)}}return Promise.reject(error)})

好了，今天的知识分析就到这里，喜欢这篇文章的话给我点个赞鼓励一下呗？