用 Axios 封装一个双 token 无感刷新

人间凡尔赛

已于 2024-06-06 09:01:54 修改

阅读量1.6k

点赞数 18

文章标签：笔记前端

于 2024-06-06 09:00:19 首次发布

本文链接：https://blog.csdn.net/m0_53142039/article/details/135315209

版权

为什么要用双Token无感刷新，它解决了什么问题？

为了保证安全性，后端设置的Token不可能长期有效，过了一段时间Token就会失效。而发送网络请求的过程又是需要携带Token的，一旦Token失效，用户就要重新登陆，这样用户可能需要频繁登录，体验不好。为了解决这个问题，采取双Token（Access_Token,Refresh_Token）无感刷新，用户完全体会不到Token的变化，但实际上，Token已经刷新了。

如何实现token的无感刷新。

在单点登录的环境下，服务器会给用户一个短时token,而另一个长时刷新token用于换取短时token。通过拦截器和配置更改，可以实现自动刷新token的功能。手动刷新token可以通过修改请求头中的token实现。同时，提到了一种通过excel创建基地址并使用拦截器来实现自动刷新token的方案。

单点登录的模式，并以C型加cookie模式为例详细讲解了用户如何完成登录流程。C型加cookie模式具有很强的控制力，但存在着烧钱、认证中心压力大等问题。为了降低成本和减轻认证中心的压力，出现了Token模式，用户登录后生成一个不能被篡改的字符串作为Token,而不再在服务器表格中记录任何东西。Token模式的优势在于成本低，但控制力较弱。

用户登录之后，会返回一个用户的标识，之后带上这个标识请求别的接口，就能识别出该用户。

标识登录状态的方案有两种：session 和 jwt

session 是通过 cookie 返回一个 id，关联服务端内存里保存的 session 对象，请求时服务端取出 cookie 里 id 对应的 session 对象，就可以拿到用户信息。

jwt 不在服务端存储，会直接把用户信息放到 token 里返回，每次请求带上这个 token，服务端就能从中取出用户信息。 token 一般是放在一个叫 authorization 的 header 里。

双 token 验证流程

用户登录向服务端发送账号密码，登录失败返回客户端重新登录。登录成功服务端生成 accessToken 和 refreshToken，返回生成的 token 给客户端。
在请求拦截器中，请求头中携带 accessToken 请求数据，服务端验证 accessToken 是否过期。token 有效继续请求数据，token 失效返回失效信息到客户端。
客户端收到服务端发送的请求信息，在二次封装的 axios 的响应拦截器中判断是否有 accessToken 失效的信息，没有返回响应的数据。有失效的信息，就携带 refreshToken 请求新的 accessToken。
服务端验证 refreshToken 是否有效。有效，重新生成 token，返回新的 token 和提示信息到客户端，无效，返回无效信息给客户端。
客户端响应拦截器判断响应信息是否有 refreshToken 有效无效。无效，退出当前登录。有效，重新存储新的 token，继续请求上一次请求的数据。

这两种方案一个服务端存储，通过 cookie 携带标识，一个在客户端存储，通过 header 携带标识。

session 的方案默认不支持分布式，因为是保存在一台服务器的内存的，另一台服务器没有

jwt 的方案天然支持分布式，因为信息保存在 token 里，只要从中取出来就行。

前端部分在axios封装时候加拦截器判断token是否过期，我这里跟别人写的最大的不同点是：我创建了两个axios对象，一个正常数据请求用（server），另一个专门刷新token用（serverRefreshToken），这样写的好处是省去了易错的判断逻辑

refreshToken.js

import request from './request';
import { getRefreshToken } from './token';
 // 定义一个全局或模块级的变量来存储当前的刷新token请求的Promise
let promise = null;

// 异步函数，用于刷新token
async function refreshToken() {
  // 如果已经有一个刷新token的请求正在进行，直接返回该Promise
  if (promise) {
    return promise;
  }

  // 创建一个新的Promise
  promise = new Promise((resolve, reject) => {
    // 打印日志，表示正在刷新token
    console.log('正在刷新token');

    // 发起GET请求到'/refresh_token'路径，并携带Authorization头部
    request.get('/refresh_token', {
      headers: {
        // 使用getRefreshToken函数获取的当前刷新token
        Authorization: `Bearer ${getRefreshToken()}`,
      },
      // 假设这不是一个标准的请求选项，如果确实需要这样的属性，请确保你的请求库支持它
      // 否则，请移除或替换为正确的请求选项
      // __isRefreshToken: true, // 不规范的属性，通常不建议在请求配置中使用双下划线开头的属性
    })
    .then((resp) => {
      // 如果响应的code为0，表示请求成功，resolve Promise并返回true
      if (resp.code === 0) {
        resolve(true);
      } else {
        // 如果code不为0，可能表示请求失败或token无效，resolve Promise并返回false
        resolve(false);
      }
    })
    .catch((error) => {
      // 如果请求发生错误，reject Promise并传递错误对象
      reject(error);
    });
  });

  // 无论Promise是resolve还是reject，都会执行finally块中的代码
  promise.finally(() => {
    // 将promise设置为null，表示刷新token的请求已经完成
    promise = null;
  });

  // 返回Promise，允许调用者使用await等待其完成
  return promise;
}

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的状态

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，逐个重试。

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)
})