vue实际运用六：处理token过期

1. 后端为了安全，token一般存在有效时间，当token过期，所有请求失效

解决方案：

1)在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。

优点：在请求前拦截，能节省请求，省流量
缺点：需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败
使用方法：axios.interceptors.request.use() 这个请求前拦截方法

2)根据拦截返回后的数据判断，若token过期，先刷新token，再进行一次请求。

优点：不需额外的token过期字段，不需判断时间
缺点：会消耗多一次请求，耗流量
使用方法：axios.interceptors.response.use() 这个响应拦截方法

最简单方法：获取到过期code，直接跳到登录页

2. 实现方法二

1)封装axios基本结构

token是存在localStorage中

//在request.jsimport axios from 'axios'// 创建一个实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // request timeout
})// 从localStorage中获取token
function getLocalToken () {const token = window.localStorage.getItem('token')return token
}// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中
service.setToken = (token) => {instance.defaults.headers['X-Token'] = tokenwindow.localStorage.setItem('token', token)
}// 拦截返回的数据
service.interceptors.response.use(response => {// 接下来会在这里进行token过期的逻辑处理return response
}, error => {return Promise.reject(error)
})//暴露
export default service

假如后端接口token过期返回的code是401

//获取新的token请求
function refreshToken () {return service.post('/refreshtoken').then(res => res.data)
}// 拦截返回的数据
service.interceptors.response.use(response => {// 接下来会在这里进行token过期的逻辑处理const { code } = response.data-----------------------------------------------------------// 说明token过期了,获取新的tokenif (code === 401) {return refreshToken().then(res => {// 刷新token成功，将最新的token更新到header中，同时保存在localStorage中const { token } = res.dataservice.setToken(token)// 获取当前失败的请求const config = response.config//重置失败请求的配置config.headers['X-Token'] = tokenconfig.baseURL = '' "//重试当前请求并返回promisereturn service(config)}).catch( res=>{//重新请求token失败，跳转到登录页window.location.href = '/login '} )}--------------------------------------------------------------return response}, error => {return Promise.reject(error)
})

2)问题和优化

如果token失效时，存在多个请求，这就会导致多次执行刷新token的接口

在request.js中用一个变量来标记当前是否正在刷新token的状态，如果正在刷新则不再调用刷新token的接口

在request.js// 是否正在刷新的标记
let isRefreshing = false-----------------------------------------------------------// 说明token过期了,获取新的tokenif (code === 401) {//判断一下状态if( !isRefreshing ){//修改状态，进入更新token阶段isRefreshing = truereturn refreshToken().then(res => {// 刷新token成功，将最新的token更新到header中，同时保存在localStorage中const { token } = res.dataservice.setToken(token)// 获取当前失败的请求const config = response.config//重置失败请求的配置config.headers['X-Token'] = tokenconfig.baseURL = '' "//重试当前请求并返回promisereturn service(config)}).catch( res=>{//重新请求token失败，跳转到登录页window.location.href = '/login '} ).finally( ()=>{//完成之后在关闭状态isRefreshing = false} )}}--------------------------------------------------------------

同时发起两个或以上的请求时，其他接口如何重试

两个接口几乎同时发起和返回，第一个接口会进入刷新token后重试的流程，而第二个接口需要先存起来，然后等刷新token后再重试。同样，如果同时发起三个请求，此时需要缓存后两个接口，等刷新token后再重试；
当第二个过期的请求进来，token正在刷新，我们先将这个请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新token后再逐个重试清空请求队列。
将请求存进队列中后，同时返回一个Promise，让这个Promise一直处于Pending状态（即不调用resolve），此时这个请求就会一直等啊等，只要我们不执行resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，我们再调用resolve，逐个重试。

// 是否正在刷新的标记
let isRefreshing = false
// 重试队列，每一项将是一个待执行的函数形式
let requests = []-----------------------------------------------------------// 说明token过期了,获取新的tokenif (code === 401) {const config = response.config//判断一下状态if( !isRefreshing ){//修改状态，进入更新token阶段isRefreshing = true// 获取当前的请求return refreshToken().then(res => {// 刷新token成功，将最新的token更新到header中，同时保存在localStorage中const { token } = res.dataservice.setToken(token)//重置失败请求的配置config.headers['X-Token'] = tokenconfig.baseURL = '' "//已经刷新了token，将所有队列中的请求进行重试requests.forEach(cb => cb(token))// 重试完了别忘了清空这个队列requests = []return service(config)}).catch( res=>{//重新请求token失败，跳转到登录页window.location.href = '/login '} ).finally( ()=>{//完成之后在关闭状态isRefreshing = false} )} else{// 正在刷新token，返回一个未执行resolve的promisereturn new Promise((resolve) => {// 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行requests.push((token) => {config.baseURL = ''config.headers['X-Token'] = tokenresolve(instance(config))})})}}--------------------------------------------------------------

完整版

//在request.jsimport axios from 'axios'// 是否正在刷新的标记
let isRefreshing = false
// 重试队列，每一项将是一个待执行的函数形式
let requests = []// 创建一个实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // request timeout
})// 从localStorage中获取token
function getLocalToken () {const token = window.localStorage.getItem('token')return token
}// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中
service.setToken = (token) => {instance.defaults.headers['X-Token'] = tokenwindow.localStorage.setItem('token', token)
}//获取新的token请求
function refreshToken () {return service.post('/refreshtoken').then(res => res.data)
}// 拦截返回的数据
service.interceptors.response.use(response => {// 接下来会在这里进行token过期的逻辑处理const { code } = response.data-----------------------------------------------------------// 说明token过期了,获取新的tokenif (code === 401) {const config = response.config//判断一下状态if( !isRefreshing ){//修改状态，进入更新token阶段isRefreshing = true// 获取当前的请求return refreshToken().then(res => {// 刷新token成功，将最新的token更新到header中，同时保存在localStorage中const { token } = res.dataservice.setToken(token)//重置失败请求的配置config.headers['X-Token'] = tokenconfig.baseURL = '' "//已经刷新了token，将所有队列中的请求进行重试requests.forEach(cb => cb(token))// 重试完了别忘了清空这个队列requests = []return service(config)}).catch( res=>{//重新请求token失败，跳转到登录页window.location.href = '/login '} ).finally( ()=>{//完成之后在关闭状态isRefreshing = false} )} else{// 正在刷新token，返回一个未执行resolve的promisereturn new Promise((resolve) => {// 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行requests.push((token) => {config.baseURL = ''config.headers['X-Token'] = tokenresolve(instance(config))})})}}--------------------------------------------------------------return response
}, error => {return Promise.reject(error)
})//暴露
export default service

vue实际运用六：处理token过期相关推荐

vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档安装 npm install axios npm install es ...
vue实际运用：处理token过期
后端为了安全,token一般存在有效时间,当token过期,所有请求失效 1. 解决方案: 1)在请求发起前拦截每个请求,判断token的有效时间是否已经过期,若已过期,则将请求挂起,先刷新token ...
Vue中token刷新及token过期的实现
总:通过axios,vuex,及自定义的方法实现. 以下是思路: 1.做token刷新必不可少的是,token(请求时的token) / refresh_token(刷新token时用的refresh ...
Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1. 在vueresource情况下设置t ...
vue项目token过期
问题:vue项目token过期,后端会在token过期之前两秒钟在控制台的返给前端一个新的authorization(token) token过期分析:1.jwt过期(其中一个过期)===> 后 ...
vue token过期后自动刷新token
在系统登录后,后端返回一个token,和refreshToken.每次接口请求的时候都会携带这个token,但是这个token一般是有过期时间的,假设过期时间为半小时,你半小时内没有调接口.半小时后你 ...
vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...
Vue 消除Token过期时刷新页面的重复提示
1.问题现象页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后 ...
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...

vue实际运用六：处理token过期

vue实际运用六：处理token过期

1. 后端为了安全，token一般存在有效时间，当token过期，所有请求失效

解决方案：

1)在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。

2)根据拦截返回后的数据判断，若token过期，先刷新token，再进行一次请求。

最简单方法：获取到过期code，直接跳到登录页

2. 实现方法二

1)封装axios基本结构

2)问题和优化

vue实际运用六：处理token过期相关推荐

最新文章

热门文章