源码
双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;