奉贤网站建设网站制作,程序员开发网,网页框架代码,手机网页加速什么是 token 无感刷新#xff1f;为什么需要 token 无感刷新#xff1f;让我们想象一下有这么个场景#xff1a;你登录一个系统成功后#xff0c;玩了 10 分钟#xff0c;发现登录失效了#xff0c;又要你重新登录#xff0c;然后又过 10 分钟#xff0c;又失效了为什么需要 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;
总结核心代码就这些小伙伴可以根据这些代码去继续优化到自己的项目里。
