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

1.该问题出现的原因

2.处理401问题的解决方案原理

3.使用响应拦截器解决问题

1.该问题出现的原因

在前后端分离项目中，最常见的是前端点击登录后，后端返回token字符串，这个token可以看作是一个“令牌”，就比如你去酒店办理入住后，拿到的房卡，那代表你有着进去房间的权限。

1. 登录用户的token过期

token是具有时效性的，生活中，如你登录腾讯视频，接下来几天你再登录就不用输入账号密码，而时间很长如半个月后，你还要重新输入账号密码登录，这个过程就是token过期。

具体多久过期，一般是和后端商量着来，后台管理类项目如企业内部的项目为了安全性且并不会过多的考虑用户体验，一般设为很短或者干脆不做这个。

而像腾讯视频，淘宝，京东之类的商业类项目需要考虑用户体验，且对于安全性要求并不高，一般设置为7~14天比较合适。

2. 用户未登录情况,返回401错误,应该回到登录页（这个不一定是401错误）

3.小结：很普遍的功能，80%的项目都会做这个功能

2. 处理401问题的解决方案原理

完整的逻辑为：

前端请求接口api --> 返回401错误 --> 前端判断是否有refresh_token -->如果有就用refresh_token请求新的token --> 后台成功返回一个新的token给我们 --> 更新vuex+本地存储持久化 --> 然后重新发送请求 --> 带上新的token请求数据

当然，如果没有refresh_token就老老实实去登录吧！

方案：目前常见的处理方式是：当用户登陆成功之后，返回的token中有两个值

原理：一个是token，他的有效期是2小时（举例），一个是姑且称为refresh_token，他的有效期长，比如是14天，假设用户登录后2小时后，token过期了，那么我们看一下refresh_token在不在，在的话，就用refresh_token再次发送，后端会返回一个新的token。

核心点：1.解决401问题重点在于让用户“无感”，也就是说用户不知道token过期也不需要用户再次登录，需要的是我们程序员去处理。

2.解决这个问题的地方在响应拦截器

3.使用响应拦截器解决问题

3.1 作用

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

以下是我封装的响应拦截器（可以通用），主要完成两件事：

处理401问题，以及注入token

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错误解决方法:响应拦截器相关推荐

401错误解决方法:响应拦截器
关于401错误 401错误场景 1. 用户未登录,代码报401,应该回到登录页 2. 登录用户的token过期 : 怎样理解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 分析原因 ...
王者荣耀体验服什么叫服务器未响应,王者荣耀体验服登陆不进去怎么回事体验服版本错误解决方法...
今天想必很多有想玩体验服,进去尝试下新英雄梦奇的玩家,不过点进去后,发现提示版本错误,那么体验服在今天一直进不去是怎么回事呢,版本错误,退出后再次重进,也是错误,这是什么情况呢,其实是由于本次更新耗时 ...
快速了解AngularJs HTTP响应拦截器
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
axios 请求拦截器响应拦截器
一. 拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
Vue中的请求拦截器和响应拦截器
前置大家好,我又来了,我们今天就讲一下什么是请求拦截器,和请求拦截器的作用,好了,多余的话我就不说了,马上开始今天的讲解开始啦请求拦截器请求拦截器的作用是: 在请求发送前进行一些操作,例如在每 ...
axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)
axios官方文档一.请求拦截器设置headers,给所有请求加上Authorization:token值二.响应拦截器直接去访问/article,发现可以进入到article内容管理页面原 ...

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

1.该问题出现的原因

2. 处理401问题的解决方案原理

3.使用响应拦截器解决问题

3.1 作用

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

最新文章

热门文章

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

1.该问题出现的原因

2. 处理401问题的解决方案原理

3.使用响应拦截器解决问题

3.1 作用

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

最新文章

热门文章

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

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