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)}
)

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

当发请求时出现 401，原来可以这样解决，还不赶快学起来相关推荐

postman测试接口成功，实际发请求时失败
postman测试接口成功,实际发请求时失败,当遇到这个问题的时候,你需要关注一下两次携带的数据是否相同,有可能是因为格式的不同导致的,我最近也遇到了这个问题,因为postman测试的时候是form- ...
ajax请求时提醒参数为空的解决办法
1.ajax请求时提醒参数为空的解决办法: 我们要把js对象用stringify转成json,然后再加上:contentType: "application/json" var _ ...
axios java 参数,vue.js axios发请求时,参数包括dto和一个flag, 后台如何接?
1.vue.js使用axios向后台发请求. 传递参数中包含一个object,一个string. object到后台用javaBean接, String到后台用String接. 2.前台代码遇新是直朋 ...
java http 中文乱码_关于java发送http请求时中文乱码的一种解决办法
在jsp中常见的乱码解决办法无外乎是关于get和post两种方式的,但只有切实地在实践中使用时才会注意或者说注重到其他方式.例如,在http请求头中传送中文参数,出现乱码,如何解决? 实际场景:使用S ...
x-http-wrapper: 如何解决每次发版时，修改http相关代码造成的错误！(Android、iOS、h5)...
其实是我做了个开源工具(^__^),拿出来给大家鉴赏下,欢迎大家提意见项目:github.com/xuyt11/x-ht- 欢迎关注和star . 功能:这是一个http相关代码的创建工具. 现在我 ...
bug修复录-qq浏览器中post请求时body为空
近期项目中遇到一个bug,其中解决过程比较有意思,特此记录下来.有一天看到报警记录有一个500服务端的错误,量很少,一周都不一定有一个,先根据服务器里的本地日志拿到了当时请求的相关信息像UA.cook ...
vue+axios请求时设置request header请求头（带上token）
vue+axios请求时设置请求头(带上token) 1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值(本地存储的token,wind ...
AJAX请求时status返回状态明细表 readyState的五种状态
为什么80%的码农都做不了架构师?>>> 在<Pragmatic Ajax A Web 2.0 Primer >中偶然看到对readyStae状态的介绍,感觉这个介 ...
Chrome浏览器对统一资源发出多个请求时，导致最多停止20s问题
Chrome浏览器对统一资源发出多个请求时,导致最多停止20s问题 Chrome浏览器对统一资源发出多个请求时,导致最多停止20s问题使用环境: 问题描述: 解决方案: 永久: 临时: 参考文档主要 ...

当发请求时出现 401，原来可以这样解决，还不赶快学起来

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

方法1：

方法2(双token)：

当发请求时出现 401，原来可以这样解决，还不赶快学起来相关推荐

最新文章

热门文章