401状态码的处理
401状态码的含义
:
axios向服务器端发送请求时,有两种情况会出现401状态码(unauthorized未授权):
- 服务端要求传递token信息,而实际发送请求时没有传递。
- 发送请求时有传递token到达服务器端,但由于时间比较久,这个token在服务器中已经过期了(服务器存储token有效期时间为2个小时)。
- 总之,服务器端有些api接口要求传递token,token失效或没有传递,就会报401错误。
401状态码的处理
:
- 在axios请求拦截器中做token传递操作。
- 可以这样设置,在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 toJSONif (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)
})
注意
:
-
路由对象.push(xxx) 可以实现编程式导航。
-
路由对象:在组件中是 this.$router ,在main.js/ax.js文件中就是router对象(需要import导入)。
- 模拟服务器端token失效步骤:
- 删除客户端sessionStorage数据。
- 暂时屏蔽守卫代码(开发完毕再打开)。