vue前端双token源码与流程图

源码

双token设计的意义其他文章说的很清楚来了，这里就不再重复了，直接附上源码

封装的token方法

// 设置
export function setToken (tokenKey, token){
    return localStorage.setItem(tokenKey,token)
}

// 获取
export function getToken (tokenKey){
    return localStorage.getItem(tokenKey)
}

// 删除
export function removeToken(tokenKey){
    return localStorage.removeItem(tokenKey)
}

封装的axios

// 引入 axios
import axios from 'axios';
import router from './router';
import { setToken, getToken, removeToken } from './utils/setToken.js';


// 封装 baseURL
const request = axios.create({
  baseURL: "http://w1623156452.e2.luyouxia.net:21234",
  timeout:10000, //请求的超时毫秒数
  contentType: "application/json",
})
let refreshToken="";
let isrefreshToken = true;
// 添加请求拦截器
request.interceptors.request.use((config) => {
	// 在请求之前做些什么(获取并设置token)
	console.log('请求');
	// 对双token的操作

	let token=getToken("accessToken")

	if (token) {
		if(!isrefreshToken){
			config.headers['x-token'] = getToken('accessToken') || ""
		}
	}

	if (refreshToken) {
		if(isrefreshToken){
			config.headers['x-token'] = getToken('refreshToken')
		}
	}

	return config;
}),
	(error) => {
		return Promise.reject(error);
	};

// 添加响应拦截器
request.interceptors.response.use((response) => {
	// 对响应数据做些什么
	console.log('响应状态码',response.data.code);	
	// console.log(response.message);

	let code = response.data.code


	// 还没有设置refreshToken请求头，需要设置一下再次发送请求
	if (!refreshToken && getToken('refreshToken') != null) {
		refreshToken = getToken('refreshToken')
		return request(response.config)
	}

	if (code == 401) {
		// console.log('401返回数据');
		// console.log(response.data);
		// console.log('走了401');

		//accessToken过期了，需要带着refreshToken，去换取新的token
		refreshToken=getToken("refreshToken")
		isrefreshToken = true
		// 相当于重新走一遍刚刚的请求
		return request(response.config)
	}

	if (code == 1024) {
		// 拿到了新的accessToken，我需要保存一下
		// console.log('1024返回数据');
		// console.log(response.data);
		// console.log('走了1024');

		setToken("accessToken",response.data.data)
		isrefreshToken = false
		return request(response.config)
	}else if (code == 1023) {
		// accessToken和refreshToken都过期了
		// console.log('1023返回数据');
		// console.log(response.data);
		// console.log('走了1023');

		// 将本地token删除
		removeToken("refreshToken")
		removeToken("accessToken")
		// 跳转到登录页面，重新登录
		router.push('/login')
		//返回信息，让用户重新登录
		isrefreshToken = true
		// ({ message: '登录以过期,请重新登录', type: 'success' })
		alert('登录已超期,请重新登录')
	}

	return response;
}),
	(error) => {
		return Promise.reject(error);
	};

// 向外暴露 request
export default request;

流程图