401 状态,响应状态码401,关于401状态码的含义和处理方式

401 状态,响应状态码401,关于401状态码的含义和处理方式

本文主要介绍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小时后到期)

//strong制用户重新登录系统,刷新服务器端的令牌老化。

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) //跳转到回登录页

返回承诺。拒绝(错误)

}

}

退货承诺。拒绝(错误)

}

)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: