VUE前端实现token的无感刷新方式

更新时间：2023年11月18日 09:09:23 作者：老电影故事

这篇文章主要介绍了VUE前端实现token的无感刷新方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

说实话，这个其实没啥好讲的，要说有复杂度的话，也主要是在后端。

实现token无感刷新对于前端来说是一项十分常用的技术，其本质都是为了优化用户体验，当token过期时不需要用户调回登录页重新登录，而是当token失效时，进行拦截，发送刷新token的请求，获取最新的token进行覆盖，让用户感受不到token已过期。

token刷新的方案

方案一：后端返回过期时间，前端判断token过期时间，去调用刷新token的接口

缺点：需要后端提供一个token过期时间的字段；使用本地时间判断，若本地时间被修改，本地时间比服务器时间慢，拦截会失败。

方案二：写个定时器，定时刷新token接口

缺点：浪费资源，消耗性能，不建议采用

方案三：在响应拦截器中拦截，判断token返回过期后，调用刷新token接口（⭕推荐使用）

具体思路

token失效后接口返回401

有感刷新：清除token，强制跳转回登录页，有感知的重新登录拿到新token替换到本地，体验不好

无感刷新：使用登录时保存的refresh_token调用另一个接口，换回新的token值，替换到本地，再次完成本次未完成的请求（用户无感知）

具体步骤：

1、首次登录的时候会获取到两个token，一个是平时请求接口正常使用的token（过期时间短），另一个是专门用于刷新的refresh_token（过期时间一般比较长），登陆时都存起来 localStorage.setItem(‘refresh_token’,xxx) localStorage.setItem(‘token’, xxx)

2、在响应拦截器中对401状态码引入刷新token的api方法调用

3、替换保存本地新的token

4、headers替换新的token

5、axios再次发起未完成的请求，返回promise对象到最开始发起请求的页面

6、如果refresh_token也过期了，那就判断是否过期，过期了就清除localstorage跳转回登录页面

登陆时拿到的后端数据：

存起来

refreshToken.js

import request from './request

export function refreshToken() {
	const resp = request.get('/refresh_token', {
		headers: {
			token: `${refresh_token}`
		},
		__isRefreshToken: true
	})
	// return resp.code === 0 // 等于0表示刷新token成功
}

export function isRefreshRequest(config) {
	return !!config.__isRefreshToken //两个取反，变成boolean
}

request.js

import axios from 'axios'
import { refreshToken, isRefreshRequest } form './refreshToken.js'

// 创建axios实例
const service = axios.create({
  // baseURL: '',// 所有的请求地址前缀部分
  timeout: 25000, // 请求超时时间(毫秒)
  withCredentials: true// 异步请求携带cookie
})

// 请求拦截器
service.interceptors.request.use((config: any) => {
	...
}, error => {
	...
})

// 响应拦截器
service.interceptors.response.use((response: any) => {
	let res = response.data
	if (res.code == '401' && !isRefreshRequest(res.config)){ // 如果没有权限且不是刷新token的请求
		// 刷新token
		try {
			const res = await refreshToken()
			// 保存新的token
			localStorage.setItem('token', res.data.token)
			// 有新token后再重新请求
			response.config.headers.token = localStorage.getItem('token') // 新token
			const resp = await service.request(response.config)
			return resp.data
			// return service(response.config)
		}catch {
			localStorage.clear() // 清除token
			router.replace('/login') // 跳转到登录页
		}
	}
}, error => {
	...
	console.log('error', error)
	return Promise.reject(error)
})

问题一：如何防止多次刷新token

为了防止多次刷新token，可以通过一个变量isRefreshing 去控制是否在刷新token的状态

request.js

import axios from 'axios'
import { refreshToken, isRefreshRequest } form './refreshToken.js'

// 创建axios实例
const service = axios.create({
  // baseURL: '',// 所有的请求地址前缀部分
  timeout: 25000, // 请求超时时间(毫秒)
  withCredentials: true// 异步请求携带cookie
})

// 请求拦截器
service.interceptors.request.use((config: any) => {
	...
}, error => {
	...
})

// 响应拦截器
service.interceptors.response.use((response: any) => {
	let res = response.data
	let isRefreshing = false
	if (res.code == '401' && ! isRefreshRequest(res.config)){ // 如果没有权限且不是刷新token的请求
		if (!isRefreshing) {
			isRefreshing = true
			// 刷新token
			try {
				const res = await refreshToken()
				// 保存新的token
				localStorage.setItem('token', res.data.token)
				// 有新token后再重新请求
				response.config.headers.token = localStorage.getItem('token') // 新token
				const resp = await service.request(response.config)
				return resp.data
				// return service(response.config)
			}catch {
				localStorage.clear() // 清除token
				router.replace('/login') // 跳转到登录页
			}
			isRefreshing = false
		}
	}
}, error => {
	...
	console.log('error', error)
	return Promise.reject(error)
})

问题二：同时发起两个或者两个以上的请求时，怎么刷新token

当第二个过期的请求进来，token正在刷新，我们先将这个请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新token后再逐个重试清空请求队列。

那么如何做到让这个请求处于等待中呢？

为了解决这个问题，我们得借助Promise。将请求存进队列中后，同时返回一个Promise，让这个Promise一直处于Pending状态（即不调用resolve），此时这个请求就会一直等啊等，只要我们不执行resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，我们再调用resolve，逐个重试。

request.js

import axios from 'axios'
import { refreshToken, isRefreshRequest } form './refreshToken.js'

// 创建axios实例
const service = axios.create({
  // baseURL: '',// 所有的请求地址前缀部分
  timeout: 25000, // 请求超时时间(毫秒)
  withCredentials: true// 异步请求携带cookie
})

// 请求拦截器
service.interceptors.request.use((config: any) => {
	...
}, error => {
	...
})

// 响应拦截器
service.interceptors.response.use((response: any) => {
	let res = response.data
	let isRefreshing = false
	let requests = [] // 请求队列
	if (res.code == '401' && isRefreshRequest(res.config)){ // 如果没有权限且不是刷新token的请求
		if (!isRefreshing) {
			isRefreshing = true
			// 刷新token
			try {
				const res = await refreshToken()
				// 保存新的token
				localStorage.setItem('token', res.data.token)
				// 有新token后再重新请求
				response.config.headers.token = localStorage.getItem('token') // 新token
				
				// token 刷新后将数组的方法重新执行
		        requests.forEach((cb) => cb(token))
		        requests = [] // 重新请求完清空
		        
				const resp = await service.request(response.config)
				return resp.data
				// return service(response.config)
			}catch {
				localStorage.clear() // 清除token
				router.replace('/login') // 跳转到登录页
			}
			isRefreshing = false
		} else {
			// 返回未执行 resolve 的 Promise
			return new Promise(resolve => {
				// 用函数形式将 resolve 存入，等待刷新后再执行
				request.push(token => {
					response.config.headers.token = `${token}`
					resolve(service(response.config))
				})
			})
		}
	}
}, error => {
	...
	console.log('error', error)
	return Promise.reject(error)
})

具体可以学习这个视频

token无感刷新

参考文档

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-router命名视图的使用讲解
今天小编就为大家分享一篇关于vue-router命名视图的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
el-table实现嵌套表格的展示功能(完整代码)
el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式,将共同的列放到一列中,通过渲染自定义表头render-header,将表头按照合适的宽度渲染出来,本文给大家分享el-table实现嵌套表格的展示功能,感兴趣的朋友一起看看吧
2024-02-02
原生echart和vue-echart的使用详解
这篇文章主要为大家详细介绍了原生echart和vue-echart的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue子组件获取到它父组件数据的4种方法
这篇文章主要给大家介绍了关于vue子组件获取到它父组件数据的4种方法,对于vue来说组件之间的消息传递是非常重要的,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-08-08
vue2.0实现前端星星评分功能组件实例代码
本文通过实例代码给大家介绍了vue2.0实现前端星星评分功能组件，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-02-02
浅谈Vue项目骨架屏注入实践
这篇文章主要介绍了浅谈Vue项目骨架屏注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
本篇文章主要介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持，非常具有实用价值，需要的朋友可以参考下
2017-10-10
vue项目打包发布到Nginx后无法访问后端接口的解决办法
这篇文章主要给大家介绍了关于vue项目打包发布到Nginx后无法访问后端接口的解决办法,记录一下项目需要注意的地方,方便以后快速使用,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码，需要的朋友可以参考下
2023-10-10
基于Vue实现简单的贪食蛇游戏
贪食蛇是一个非常经典的游戏, 在游戏中, 玩家操控一条细长的直线, 它会不停前进, 玩家只能操控蛇的头部朝向, 一路拾起触碰到之物。本文将用Vue实现这一游戏，感兴趣的可以尝试一下
2022-04-04