关于401错误

401错误场景

1. 用户未登录,代码报401,应该回到登录页

2. 登录用户的token过期 :

怎样理解token过期?

. 就是登录成功了以后,后端会返回一个token值,这个值在后续请求时带上（就像是开门钥匙),

但是，这个值一般会有有效期（具体是多长，是由后端决定）token过期是为了安全起见

refresh_token

说明 : 当用户登陆成功之后，返回的token中有两个值

图示说明:

作用:

响应拦截器

说明

响应拦截器可以解决401错误

响应拦截器的功能

所有从后端回来的响应都会集中进入响应拦截器中,如果发生401错误就可以解决

图示说明

代码演示

import router from '../router/auth.js'// 响应拦截器
request.interceptors.response.use(function (response) {console.log('响应拦截器', response)return response
}, async function (error) {// 如果发生了错误，判断是否是401console.dir(error)if (error.response.status === 401) {// 出现401就在这里面 开始处理 ---console.log('响应拦截器-错误-401')const refreshToken = store.state.tokenInfo.refresh_token// if (有refresh_token) {       ---- 有refresh_tokenif (refreshToken) {// 1. 请求新tokentry {const res = await axios({url: 'http://localhost:8000/v1_0/authorizations',method: 'PUT',headers: {Authorization: `Bearer ${refreshToken}`}})console.log('请求新token', res.data.data.token)// 2. 保存到vuexstore.commit('mSetToken', {   // mSetToken是前面定义的mutations名字refresh_token: refreshToken,token: res.data.data.token})// 3. 重发请求//    request是上面创建的axios的实例，它会自动从vuex取出token带上return request(error.config)} catch (error) {// 1. 清除tokenstore.commit('mSetToken', {})  // 2. 去到登录页(如果有token值，就不能到login)const backtoUrl = encodeURIComponent(router.currentRoute.fullPath)router.push('/login?backto=' + backtoUrl)  return Promise.reject(error) }} else {// 如果没有refresh_token的时候   ----没有refresh_token// 1.去到登录页// 2.清除tokenstore.commit('mSetToken', {})const backtoUrl = encodeURIComponent(router.currentRoute.fullPath)  // 回到原来跳过来的的页面,不加?后面的一串就会到首页router.push('/login?backto=' + backtoUrl)return Promise.reject(error)  // 返回错误信息}} else {return Promise.reject(error)}
})

原理

它的执行顺序是: 请求接口 --> 发生401报错 --> 判断是否有refresh_token -->如果有就用fresh_token请求新的token --> 后台成功返回一个新的token给我们 --> 更新vuex --> 然后重新发送请求 --> 带上新的token请求数据

如果是异常情况: 就是没有fresh_token的情况

401错误解决方法:响应拦截器相关推荐

前端401错误解决方法:响应拦截器
目录 1.该问题出现的原因 2.处理401问题的解决方案原理 3.使用响应拦截器解决问题 1.该问题出现的原因在前后端分离项目中,最常见的是前端点击登录后,后端返回token字符串,这个token可 ...
axios的使用（请求，响应拦截器）
axios的使用本篇博客简要讲述本人在前端vue开发过程中对于axios的理解文章目录 axios的使用前言一.axios是什么? 二.使用步骤 1.引入库 2.axios使用 1,引用axi ...
vue 项目 axios 响应拦截器统一判断401 (登录)过期
背景: 为了模拟token 过期,专门把token 设置错误,为401 界面把axios 官网里的复制到拦截器里放置到request.js 里在响应器里进行判断4**, 5** 状态码错误 ...
axios的响应拦截器 - 错误统一处理 / 获取数据繁琐
1. 问题登录时,填写错误的用户名密码,没有错误提示(没有进入catch分支) 获取ajax的返回结果比较麻烦:res.data.data.xxxx 2.解决登录失败不报错的问题 2.1 分析原因 ...
王者荣耀体验服什么叫服务器未响应,王者荣耀体验服登陆不进去怎么回事体验服版本错误解决方法...
今天想必很多有想玩体验服,进去尝试下新英雄梦奇的玩家,不过点进去后,发现提示版本错误,那么体验服在今天一直进不去是怎么回事呢,版本错误,退出后再次重进,也是错误,这是什么情况呢,其实是由于本次更新耗时 ...
axios 请求拦截器响应拦截器
一. 拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
快速了解AngularJs HTTP响应拦截器
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
如何使用 Axios 中的请求拦截器和响应拦截器
Axios 是一个常用的 JavaScript 库,用于发送 HTTP 请求和处理响应.在网站设计中,我们可以使用 Axios 请求拦截器和响应拦截器来实现一些常见的需求,例如添加认证信息.处理错误信 ...
axios的响应拦截器
一.拦截器介绍: 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器请求拦截器: 在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...

401错误解决方法:响应拦截器

关于401错误

401错误场景

怎样理解token过期?

refresh_token

响应拦截器

说明

响应拦截器的功能

图示说明

代码演示

原理

401错误解决方法:响应拦截器相关推荐

最新文章

热门文章

401错误 解决方法:响应拦截器

关于401错误

401错误场景

怎样理解token过期?

refresh_token

响应拦截器

说明

响应拦截器的功能

图示说明

代码演示

原理

401错误 解决方法:响应拦截器相关推荐

最新文章

热门文章

401错误解决方法:响应拦截器

401错误解决方法:响应拦截器相关推荐