关于401状态码的含义和处理方式
作者:木蓝茶陌*_* 发布时间:2023-03-16 01:03:08
401状态码的含义和处理
401状态码的含义
axios向服务器端发送请求时,有两种情况会出现401状态码(unauthorized未授权):
1. 服务端要求传递token信息,而实际发送请求时没有传递。
2. 发送请求时有传递token到达服务器端,但由于时间比较久,这个token在服务器中已经过期了(服务器存储token有效期时间为2个小时)。
总之,服务器端有些api接口要求传递token,token失效或没有传递,就会报401错误。
401状态码的处理
1. 在axios请求 * 中做token传递操作。
2. 可以这样设置,在axios响应 * 中判断请求状态如果是401,就强制用户重新登录系统。
第2种情况处理实现:
在axios的响应 * 中,判断错误码等于401就强制登录(utils/ax.js)
// 引入路由
import router from '@/router'
// 配置响应 *
axios.interceptors.response.use(function (response) {
// 正常响应处理
return response
}, function (error) {
// 非正常响应处理(包括401)
// console.dir(error) // 对象: config request response isAxiosError toJSON
if (error.response.status === 401) {
// token失效(token在服务器端已经失效了,2个小时时效)
// 强制用户重新登录系统,以刷新服务器端的token时效
router.push('/login')
// 不要给做错误提示了
return new Promise(function () {}) // 空的Promise对象,没有机会执行catch,进而不做错误提示了
}
// return new Promise((resolve,reject)=>{
// reject('获得文章失败!')
// })
return Promise.reject(error)
})
注意:
1. 路由对象.push(xxx) 可以实现编程式导航。
2. 路由对象:在组件中是 this.$router ,在main.js/ax.js文件中就是router对象(需要import导入)。
模拟服务器端token失效步骤:
1. 删除客户端sessionStorage数据。
2. 暂时屏蔽守卫代码(开发完毕再打开)。
401状态码升级处理
401状态码
axios向服务器端发送请求时有两种情况会出现401状态码(unauthorized未授权):
1. 服务端要求传递token信息,而实际没有传递。
2. 有传递token到达服务器端,但由于时间比较久,这个token在服务器中已经过期了(服务器存储token有效期时间为2个小时)。
总之,服务器端有些api接口要求传递token,token失效或没有传递,就会报401错误。
相关处理
1. 第1种情况,可以在axios请求 * 中做token传递操作。
2. 第2种情况,之前是这样处理的,在axios响应 * 中判断请求状态如果是401,就强制用户重新登录系统
这样处理用户体验非常不好,现在做一次升级优化处理。
服务器端返回两个秘钥信息,它们在服务端都有使用时效:
token
有效期2小时。refresh_token
有效期14天,refresh_token用于在token过期后,重新获取并刷新token时效使用的。
针对第2种401状态码处理步骤为:
1. 判断refresh_token是否存在
不存在就直接重新登录。
存在,axios发起请求,带着refresh_token请求服务端,获取新token出来:
成功:对vuex和localStorage进行token信息更新。
失败:清空无效用户信息,直接重新登录。
示例代码1
// 响应 * (响应成功:剥离无效数据,响应失败:刷新token)
instance.interceptors.response.use(res => {
// 将来获取数据:res.data.data 麻烦
// 想要结果:data 即可
try {
return res.data.data
} catch (e) {
return res
}
}, async err => {
try {
// 目的:刷新token
if (err.response && err.response.status === 401) {
// 未登录 跳转登录页面 阻止程序运行
const { user } = store.state
// 如果没有token没登录 如果没有refresh_token无法刷新token
if (!user.token || !user.refresh_token) {
router.push('/login')
return Promise.reject(err)
}
// 刷新token,发请求,没有配置的axios,自己配置refresh_token
const res = await axios({
url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
method: 'put',
headers: {
Authorization: `Bearer ${user.refresh_token}`
}
})
// token获取 res.data.data.token
// 更新 vuex 和 本地 token
store.commit('setUser', {
token: res.data.data.token,
refresh_token: user.refresh_token
})
// 继续发送刚才错误的请求
// instance({之前错误的请求配置})
// err错误对象 包含(response 响应对象 |config 请求配置)
return instance(err.config)
}
} catch (e) { // exception 异常
// 刷新token失败
router.push('/login')
return Promise.reject(e)
}
return Promise.reject(err)
})
演示代码:promise错误处理:
示例代码2
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)
}
)
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
来源:https://blog.csdn.net/jyn15159/article/details/108879988
猜你喜欢
- 一:编译器 编译器是一种特殊的程序,它可以把以特定编程语言写成的程序变为机器可以运行的机器码。我们把一个程序写好,这时我们利用的环境是文本编
- <%MaxPerPage=8 ’定义页面最大的记录数为8<br>
- 1. sys 模块Python 中的 sys 模块具有 argv 功能。当通过终端触发 main.py 的执行时,此功能将返回提供给 mai
- 问题描述像这样的图,我想把右边的colorbar设置成和主图一样高度方法0. plt.colorbar参数介绍https://matplot
- Python中的缩进(Indentation)决定了代码的作用域范围。这一点和传统的c/c++有很大的不同(传统的c/c++使用花括号{}符
- 由于工作需要在一大堆日志里面提取相应的一些固定字符,如果单纯靠手工取提取,数据量大,劳心劳力,于是自然而然想到了用Python做一个对应的提
- 用于制作自动化微信聊天图片,通过图片生成段子视频根据一个txt文档input.txtL 一路走过来好热啊
- 这里介绍使用python-Django框架来实现web端分页呈现数据,主要说明对应的views,urls,templates三个文件的编程逻
- 进程进程是程序的一次动态执行过程,它对应了从代码加载、执行到执行完毕的一个完整过程。进程是系统进行资源分配和调度的一个独立单位。进程是由代码
- 编程语言:python3.9题目编写程序,要求程序能根据用户输入的圆半径数据计算圆的面积(圆的面积公式:S=πr^2),并分别
- 本文实例讲述了Python实现可自定义大小的截屏功能。分享给大家供大家参考,具体如下:蝈蝈这两天正忙着收拾家当去公司报道,结果做PHP的发小
- pycharm部署anaconda环境Pycharm: python编辑器,社区版本Anaconda:开源的python发行版本(专注于数据
- 挖坟 交互设计(Interaction Design)产生于二十世纪八十年代,在1984年一次设计会议上,大名鼎鼎的英国交互设计师比尔·莫格
- 我们一般采用photoshop等做图工具制作电视扫描线效果图片:首先做一个黑白相间的图案,然后用这个图案进行填充,再调整图层的模式或者透明度
- 今天开发富媒体广告遇到的问题 用JS控制flash 只在IE平台下有效 费尽周折才找到兼容的解决方案方法如下:重点在于 object的id属
- 开发客户端客户是持有TPCoins并从网络上的其他供应商处交换商品/服务的客户,包括他自己的.我们应该为此目的定义 Client&
- 简单的说,GUI编程就是给程序加上图形化界面.python的脚本开发简单,有时候只需几行代码就能实现丰富的功能,而且python本身是跨平台
- 本文实例为大家分享了js实现黑白div块画空心图形的具体代码,供大家参考,具体内容如下<!DOCTYPE html><ht
- for循环语句的对象是可迭代对象,可迭代对象需要实现__iter__或iter方法,并返回一个迭代器,什么是迭代器呢?迭代器只需要实现 __
- HTML5,被传为Flash 的杀手,是一种用于web 应用程序开发、具有变革意义的网络技术。HTML 5提供了一些新的元素和属性,其中有些