VUE前端實(shí)現(xiàn)token的無感刷新方式

更新時(shí)間：2023年11月18日 09:09:23 作者：老電影故事

這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

說實(shí)話，這個(gè)其實(shí)沒啥好講的，要說有復(fù)雜度的話，也主要是在后端。

實(shí)現(xiàn)token無感刷新對(duì)于前端來說是一項(xiàng)十分常用的技術(shù)，其本質(zhì)都是為了優(yōu)化用戶體驗(yàn)，當(dāng)token過期時(shí)不需要用戶調(diào)回登錄頁重新登錄，而是當(dāng)token失效時(shí)，進(jìn)行攔截，發(fā)送刷新token的請(qǐng)求，獲取最新的token進(jìn)行覆蓋，讓用戶感受不到token已過期。

token刷新的方案

方案一：后端返回過期時(shí)間，前端判斷token過期時(shí)間，去調(diào)用刷新token的接口

缺點(diǎn)：需要后端提供一個(gè)token過期時(shí)間的字段；使用本地時(shí)間判斷，若本地時(shí)間被修改，本地時(shí)間比服務(wù)器時(shí)間慢，攔截會(huì)失敗。

方案二：寫個(gè)定時(shí)器，定時(shí)刷新token接口

缺點(diǎn)：浪費(fèi)資源，消耗性能，不建議采用

方案三：在響應(yīng)攔截器中攔截，判斷token返回過期后，調(diào)用刷新token接口（?推薦使用）

具體思路

token失效后接口返回401

有感刷新：清除token，強(qiáng)制跳轉(zhuǎn)回登錄頁，有感知的重新登錄拿到新token替換到本地，體驗(yàn)不好

無感刷新：使用登錄時(shí)保存的refresh_token調(diào)用另一個(gè)接口，換回新的token值，替換到本地，再次完成本次未完成的請(qǐng)求（用戶無感知）

具體步驟：

1、首次登錄的時(shí)候會(huì)獲取到兩個(gè)token，一個(gè)是平時(shí)請(qǐng)求接口正常使用的token（過期時(shí)間短），另一個(gè)是專門用于刷新的refresh_token（過期時(shí)間一般比較長），登陸時(shí)都存起來 localStorage.setItem(‘refresh_token’,xxx) localStorage.setItem(‘token’, xxx)

2、在響應(yīng)攔截器中對(duì)401狀態(tài)碼引入刷新token的api方法調(diào)用

3、替換保存本地新的token

4、headers替換新的token

5、axios再次發(fā)起未完成的請(qǐng)求，返回promise對(duì)象到最開始發(fā)起請(qǐng)求的頁面

6、如果refresh_token也過期了，那就判斷是否過期，過期了就清除localstorage跳轉(zhuǎn)回登錄頁面

登陸時(shí)拿到的后端數(shù)據(jù)：

存起來

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 //兩個(gè)取反，變成boolean
}

request.js

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

// 創(chuàng)建axios實(shí)例
const service = axios.create({
  // baseURL: '',// 所有的請(qǐng)求地址前綴部分
  timeout: 25000, // 請(qǐng)求超時(shí)時(shí)間(毫秒)
  withCredentials: true// 異步請(qǐng)求攜帶cookie
})

// 請(qǐng)求攔截器
service.interceptors.request.use((config: any) => {
	...
}, error => {
	...
})

// 響應(yīng)攔截器
service.interceptors.response.use((response: any) => {
	let res = response.data
	if (res.code == '401' && !isRefreshRequest(res.config)){ // 如果沒有權(quán)限且不是刷新token的請(qǐng)求
		// 刷新token
		try {
			const res = await refreshToken()
			// 保存新的token
			localStorage.setItem('token', res.data.token)
			// 有新token后再重新請(qǐng)求
			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') // 跳轉(zhuǎn)到登錄頁
		}
	}
}, error => {
	...
	console.log('error', error)
	return Promise.reject(error)
})

問題一：如何防止多次刷新token

為了防止多次刷新token，可以通過一個(gè)變量isRefreshing 去控制是否在刷新token的狀態(tài)

request.js

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

// 創(chuàng)建axios實(shí)例
const service = axios.create({
  // baseURL: '',// 所有的請(qǐng)求地址前綴部分
  timeout: 25000, // 請(qǐng)求超時(shí)時(shí)間(毫秒)
  withCredentials: true// 異步請(qǐng)求攜帶cookie
})

// 請(qǐng)求攔截器
service.interceptors.request.use((config: any) => {
	...
}, error => {
	...
})

// 響應(yīng)攔截器
service.interceptors.response.use((response: any) => {
	let res = response.data
	let isRefreshing = false
	if (res.code == '401' && ! isRefreshRequest(res.config)){ // 如果沒有權(quán)限且不是刷新token的請(qǐng)求
		if (!isRefreshing) {
			isRefreshing = true
			// 刷新token
			try {
				const res = await refreshToken()
				// 保存新的token
				localStorage.setItem('token', res.data.token)
				// 有新token后再重新請(qǐng)求
				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') // 跳轉(zhuǎn)到登錄頁
			}
			isRefreshing = false
		}
	}
}, error => {
	...
	console.log('error', error)
	return Promise.reject(error)
})

問題二：同時(shí)發(fā)起兩個(gè)或者兩個(gè)以上的請(qǐng)求時(shí)，怎么刷新token

當(dāng)?shù)诙€(gè)過期的請(qǐng)求進(jìn)來，token正在刷新，我們先將這個(gè)請(qǐng)求存到一個(gè)數(shù)組隊(duì)列中，想辦法讓這個(gè)請(qǐng)求處于等待中，一直等到刷新token后再逐個(gè)重試清空請(qǐng)求隊(duì)列。

那么如何做到讓這個(gè)請(qǐng)求處于等待中呢？

為了解決這個(gè)問題，我們得借助Promise。將請(qǐng)求存進(jìn)隊(duì)列中后，同時(shí)返回一個(gè)Promise，讓這個(gè)Promise一直處于Pending狀態(tài)（即不調(diào)用resolve），此時(shí)這個(gè)請(qǐng)求就會(huì)一直等啊等，只要我們不執(zhí)行resolve，這個(gè)請(qǐng)求就會(huì)一直在等待。當(dāng)刷新請(qǐng)求的接口返回來后，我們?cè)僬{(diào)用resolve，逐個(gè)重試。

request.js

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

// 創(chuàng)建axios實(shí)例
const service = axios.create({
  // baseURL: '',// 所有的請(qǐng)求地址前綴部分
  timeout: 25000, // 請(qǐng)求超時(shí)時(shí)間(毫秒)
  withCredentials: true// 異步請(qǐng)求攜帶cookie
})

// 請(qǐng)求攔截器
service.interceptors.request.use((config: any) => {
	...
}, error => {
	...
})

// 響應(yīng)攔截器
service.interceptors.response.use((response: any) => {
	let res = response.data
	let isRefreshing = false
	let requests = [] // 請(qǐng)求隊(duì)列
	if (res.code == '401' && isRefreshRequest(res.config)){ // 如果沒有權(quán)限且不是刷新token的請(qǐng)求
		if (!isRefreshing) {
			isRefreshing = true
			// 刷新token
			try {
				const res = await refreshToken()
				// 保存新的token
				localStorage.setItem('token', res.data.token)
				// 有新token后再重新請(qǐng)求
				response.config.headers.token = localStorage.getItem('token') // 新token
				
				// token 刷新后將數(shù)組的方法重新執(zhí)行
		        requests.forEach((cb) => cb(token))
		        requests = [] // 重新請(qǐng)求完清空
		        
				const resp = await service.request(response.config)
				return resp.data
				// return service(response.config)
			}catch {
				localStorage.clear() // 清除token
				router.replace('/login') // 跳轉(zhuǎn)到登錄頁
			}
			isRefreshing = false
		} else {
			// 返回未執(zhí)行 resolve 的 Promise
			return new Promise(resolve => {
				// 用函數(shù)形式將 resolve 存入，等待刷新后再執(zhí)行
				request.push(token => {
					response.config.headers.token = `${token}`
					resolve(service(response.config))
				})
			})
		}
	}
}, error => {
	...
	console.log('error', error)
	return Promise.reject(error)
})

具體可以學(xué)習(xí)這個(gè)視頻

token無感刷新