本文主要介绍401状态码的含义和处理方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
401状态代码的含义和处理401状态代码的含义401状态代码的处理401状态代码的升级处理401状态代码的相关处理示例代码1示例代码2
401状态码的含义和处理
401状态码的含义当axios向服务器发送请求时，有两种情况会出现401状态代码(未授权):
1.服务器请求传递令牌信息，但在实际发送请求时没有传递。
2.发送请求时，令牌被传送到服务器。但由于时间久远，此令牌在服务器中已经过期(服务器存储的令牌有效期为2小时)。
简而言之，服务器端的一些api接口需要传递令牌。如果令牌失败或未通过，将报告401错误。
401状态码的处理1.在axios请求拦截器中执行令牌传输操作。
2.可以设置它，以便在axios响应拦截器中判断请求状态。如果是401，则强制用户再次登录系统。
第2种情况处理实现：
在axios的响应拦截器中，错误码为401 (utils/ax.js)时强制登录。
//传入路由
从 @/router 导入路由器
//配置响应拦截器
axios . interceptors . response . use(function(response){
//正常响应处理
返回响应
}，函数(错误){
//异常响应处理(含401)
//console . dir(error)//object:config请求响应isaxioserror到JSON
if(error . response . status===401){
//token无效(token在服务器端已经无效，2小时后到期)
//h3制用户重新登录系统，刷新服务器端的令牌老化。
router.push(/login )
//不要给我错误的提示。
return Promise(function(){ })//空的Promise对象，没有机会执行catch，也没有错误提示。
}
//返回新的承诺((resolve，reject)={
//reject(获取文章失败！)
//})
退货承诺.拒绝(错误)
})
注意：
1.路由对象。push(xxx)可以实现程序化导航。
2.路由对象：这个。组件中的router和main.js/ax.js文件中的router对象(需要导入)。
模拟服务器端token失效步骤：
1.删除客户端会话存储数据。
2.暂时屏蔽掉守卫代码(开发后再开放)。
401状态码升级处理
401状态码axios向服务器发送请求有两种情况，会出现401状态码(未授权):
1.服务器请求传递令牌信息，但没有传递。
2.一个传递令牌到达服务器，但由于时间太长，此令牌在服务器中已过期(服务器存储令牌2小时)。
简而言之，服务器端的一些api接口需要传递令牌。如果令牌失败或未通过，将报告401错误。
相关处理1.在第一种情况下，您可以在axios请求拦截器中进行令牌传递操作。
2.第二种情况，以前是这样处理的，是在axios响应拦截器中确定的。如果请求状态为401，则强制用户再次登录系统。
这样处理用户体验是非常不好的。现在做一个升级优化的过程。
服务器返回两条密钥信息，这两条信息在服务器上都有到期日期：
代币有效期为2小时。refresh_token的有效期为14天。refresh_token用于在令牌过期后重新获取和刷新令牌。
针对第2种401状态码处理步骤为：
1.确定refresh_token是否存在。
如果不存在，重新登录即可。
存在，axios发起一个请求，用refresh_token请求服务器，并获得一个新令牌：
成功：vuex和localStorage的令牌信息已更新。
失败：清除无效用户信息，直接登录。
示例代码1//响应拦截器(响应成功：剥离无效数据，响应失败：刷新令牌)
instance . interceptors . response . use(RES={
//获取未来数据：res.data.data please
//你想要的结果：数据。
尝试{
返回res.data.data
} catch (e) {
返回资源
}
}，异步错误={
尝试{
//目的：刷新令牌
if(err . response err . response . status===401){
//未登录，跳转到登录页面阻止程序运行
const { user }=store.state
//如果没有代币没登录如果没有刷新_令牌无法刷新代币
如果(!user.token ||！user.refresh_token) {
router.push(/login )
返回承诺。拒绝（错误)
}
//刷新令牌，发请求，没有配置的axios，自己配置刷新_令牌
const res=await axios({
网址： http://tapi . research . it cast . cn/app/v1 _ 0/authorizations ，
方法：“放”，
标题：{
授权：`不记名${user.refresh_token}
}
})
//令牌获取资源数据数据令牌
//更新vuex和本地代币
store.commit(setUser ，{
token: res.data.data.token，
刷新令牌：用户刷新令牌
})
//继续发送刚才错误的请求
//实例({之前错误的请求配置})
//错误错误对象包含（回应响应对象|配置请求配置)
返回实例(错误配置)
}
} catch (e) { //异常异常
//刷新代币失败
router.push(/login )
返回承诺。拒绝(五)
}
返回承诺。拒绝（错误)
})
演示代码：承诺错误处理：
示例代码2从" @/store"//导入商店引入vuex中的商店实例
从" @/路由器"//导入路由器引入路由对象实例
……
//响应拦截器
实例。截击机。回应。使用(
功能（响应){
尝试{
//返回具体有价值的业务数据
返回响应.数据.数据
} catch(错误){
返回响应数据
}
},
异步函数（错误){
//响应有错误，有可能错误状态码为401
如果(错误。响应错误。回应。状态===401){
//定义登录路由对象
let toPath={
名称：登录，
查询：{重定向URL:路由器。当前路线。路径}
} //跳转对象
//如果刷新_令牌不存在
如果(!商店。状态。用户。刷新_令牌){
router.push(toPath)
退货承诺。拒绝（错误)
}
尝试{
//刷新用户代币
//应该发送一个请求换取新的代币
//这里不应该再用情况因为情况会再次进入拦截器用默认的axios
let result=await axios({
方法：“放”，
网址： http://tapi . research . it cast . cn/app/v1 _ 0/authorizations ，
标题：{
授权：`不记名$ { store。状态。用户。刷新令牌}
}
})
//获取到新代币后，就对vuex和本地存储进行更新
store.commit(updateUser ，{
token: result.data.data.token，//拿到新的代币之后
refresh _ token:存储。状态。用户。刷新_令牌//将之前刷新_令牌14天有效期
})
返回实例(error.config) //把刚才错误的请求再次发送出去然后将承诺返回
} catch (err) {
//如果错误表示补救措施也没用了（有可能刷新_令牌也失效了)
//应该跳转到登录页并且把废掉的用户信息全都干掉
store.commit(clearUser) //所有的用户信息清空
router.push(toPath) //跳转到回登录页
返回承诺。拒绝（错误)
}
}
退货承诺。拒绝（错误)
}
)
) //所有的用户信息清空
router.push(toPath) //跳转到回登录页
返回承诺。拒绝（错误)
}
}
退货承诺。拒绝（错误)
}
)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
