本文主要是介绍token 无感刷新,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
什么是 token 无感刷新?为什么需要 token 无感刷新?让我们想象一下有这么个场景:你登录一个系统成功后,玩了 10 分钟,发现登录失效了,又要你重新登录,然后又过 10 分钟,又失效了,又要重新登录,难不难受,那这是怎么造成的?是因为权限 token 有效时间很短造成的,不要问,为什么权限 token 过期时间这么短,因为需要实现单点登录。那什么是单点登录呢?请参考单点登录模式。
在单点登录模式下,服务器在我们登录成功后发了两个 token 给我们,一个有效时间短的权限 token(有效时间 10 分钟),一个有效时间长的刷新token(有效时间一个月)。那这个刷新 token有啥用呢,当权限token过期后,我们可以拿刷新token再去换一个新的权限token。
现在,我们需要实现的是 token 的无感刷新,那什么是 token 的无感刷新呢,就是在权限token失效后,自动拿刷新token去换新的权限 token,拿到新的权限token后继续访问系统受保护资源。不需要用户做任何操作,完全无感。
1. 接口封装
在 refreshtoken.js 中封装刷新 token 接口。
为什么需要定义 promise,因为当权限 token 失效时,但这期间同时访问了很多需要权限 token 的接口,不可能每个接口都去调用刷新接口,如果已经在调用刷新接口了,那么就赋值给 promise,在结果没返回前,再次调用刷新接口,直接就返回 promise。
为什么需要定义 __isRefreshToken 呢,因为如果刷新 token 也不存在,那么在调用刷新接口时,就会陷入死循环,需要判断当前需要权限的接口是不是刷新接口。
// refreshtoken.js
import request from "./request.js";
import { getRefreshToken } from "./token.js";let promise = null;export const refreshToken = () => {if (promise) {return promise;}promise = new Promise(async (resolve) => {const resq = await request.get("/refresh_token", {headers: {Authorization: `Bearer ${getRefreshToken()}`,},__isRefreshToken: true,});resolve(resq.code === 0);});promise.finally(() => {promise = null;});return promise;
};export const isRefreshRequest = (config) => {return !!config.__isRefreshToken;
};
2. 封装 axios 请求
在 request.js 中封装 axios 请求
响应拦截中,后端返回的两个 token,我们都拿着保存着。当响应报 401 时,我们需要判断是不是调用刷新接口报的 401,如果不判断,就会一直在刷新接口这陷入死循环。刷新接口调用成功后,返回新 token,拿到新 token,赋值给 header,继续之前的请求。如果调用刷新接口失败,直接重新登录去。
// request.js
import axios from "axios";
import { setToken, setRefreshToken, getToken } from "./token.js";
import { refreshToken, isRefreshRequest } from "./refreshtoken.js";const service = axios.create({baseURL: "http://localhost:8080",headers: {Authorization: `Bearer ${getToken()}`,},
});// 响应拦截器
service.interceptors.response.use(async (res) => {if (res.headers.authorization) {const token = res.headers.authorization.replace("Bearer ", "");setToken(token);service.default.headers.Authorization = `Bearer ${getToken()}`;}if (res.headers.refreshtoken) {const refreshtoken = res.headers.refreshtoken.replace("Bearer ", "");setRefreshToken(refreshtoken);}if (res.data.code == 401 && !isRefreshRequest(res.config)) {const isSuccess = await refreshToken();if (isSuccess) {res.config.headers.Authorization = `Bearer ${getToken()}`;const resp = await service.request(res.config);return resp;} else {// 到登录页return res.data;}}return res.data;
});export default service;
总结:核心代码就这些,小伙伴可以根据这些代码去继续优化到自己的项目里。
这篇关于token 无感刷新的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!