vue-vben-admin 如何配置登录认证过期后的处理方式【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin在 vue-vben-admin 中用户登录后的 token 过期时后端接口会返回401状态码。框架收到401后认为登录认证过期并根据配置执行两种处理之一跳转到登录页或者在当前页面打开一个登录弹窗。如果你需要控制这个行为例如希望用户停留在原页面、通过弹窗重新登录只需要在应用目录下的preferences.ts中修改loginExpiredMode配置如果还希望过期时先尝试静默刷新 token 而不打断用户则额外开启刷新 Token 功能。本文基于项目文档 常用功能、服务端交互与数据Mock 和 偏好设置 说明配置方法。默认行为过期后跳转登录页框架的默认配置如下见 偏好设置文档中的框架默认配置app: { enableRefreshToken: false, // 默认不刷新 token loginExpiredMode: page, // 默认过期后跳转登录页 }也就是说不做任何配置时401出现后用户会被登出并跳回登录页。配置过期后的处理方式跳页或弹窗修改对应应用目录下的preferences.ts完整示例可参考 playground/src/preferences.ts在app下覆盖loginExpiredMode方式一过期后跳转到登录页面import { defineOverridesPreferences } from vben/preferences; export const overridesPreferences defineOverridesPreferences({ // overrides app: { loginExpiredMode: page, }, });配置后登录超时会跳转到登录页这是默认行为。方式二过期后打开登录弹窗import { defineOverridesPreferences } from vben/preferences; export const overridesPreferences defineOverridesPreferences({ // overrides app: { loginExpiredMode: modal, }, });配置后登录超时会打开登录弹窗效果如下两个配置项的取值类型为modal | page定义于 types 中的LoginExpiredModeType。注意preferences.ts中有这样的提示更改偏好配置后请清空缓存否则可能不生效。可选开启 Token 自动刷新如果后端提供了刷新 token 接口可以在401出现时先尝试刷新 token 并重放原请求只有刷新失败才走上面的过期处理流程。开启步骤来自 服务端交互文档在应用目录下的preferences.ts中确保enableRefreshToken为trueimport { defineOverridesPreferences } from vben/preferences; export const overridesPreferences defineOverridesPreferences({ // overrides app: { enableRefreshToken: true, }, });在应用目录下的src/api/request.ts中配置doRefreshToken方法把refreshTokenApi调整为你的刷新 token 接口// 这里调整为你的token格式 function formatToken(token: null | string) { return token ? Bearer ${token} : null; } /** * 刷新token逻辑 */ async function doRefreshToken() { const accessStore useAccessStore(); // 这里调整为你的刷新token接口 const resp await refreshTokenApi(); const newToken resp.data; accessStore.setAccessToken(newToken); return newToken; }刷新 token 的请求会由src/api/request.ts中挂载的authenticateResponseInterceptor统一接管// token过期的处理 client.addResponseInterceptor( authenticateResponseInterceptor({ client, doReAuthenticate, doRefreshToken, enableRefreshToken: preferences.app.enableRefreshToken, formatToken, }), );配置生效后如何验证行为触发条件只有一个任意接口返回401状态码。框架内部的处理链路实现见 preset-interceptors.ts是未开启enableRefreshToken或该请求已经是刷新失败后的重试请求直接执行重新认证doReAuthenticate。已开启enableRefreshToken先调用doRefreshToken刷新成功则用新 token 重放原请求刷新失败则在控制台输出Refresh token failed, please login again.再执行重新认证。doReAuthenticate的默认实现见 服务端交互文档中的 request.ts 示例是async function doReAuthenticate() { console.warn(Access token or refresh token is invalid or expired. ); const accessStore useAccessStore(); const authStore useAuthStore(); accessStore.setAccessToken(null); if ( preferences.app.loginExpiredMode modal accessStore.isAccessChecked ) { accessStore.setLoginExpired(true); } else { await authStore.logout(); } }据此可以判断配置是否生效浏览器控制台出现Access token or refresh token is invalid or expired.的警告说明401已进入过期处理流程。loginExpiredMode: page页面跳转到登录页。loginExpiredMode: modal当前页打开登录弹窗见上方截图。开启了enableRefreshToken且刷新接口失败时控制台额外出现Refresh token failed, please login again.。边界与限制loginExpiredMode: modal生效还有一个条件accessStore.isAccessChecked为true权限已完成检查。如果该条件不满足doReAuthenticate会走authStore.logout()即仍然回退为跳转登录页。loginExpiredMode只有page和modal两个取值没有第三种模式其他过期相关能力如刷新 token通过enableRefreshToken独立开关控制。修改preferences.ts后需要清空缓存再验证否则配置可能不生效。如果你的doReAuthenticate、doRefreshToken是按业务自行改写的request.ts文件注释标明该文件可自行根据业务逻辑调整控制台的日志文案和行为以你自己的实现为准本文的验证方式只适用于文档给出的默认实现。更多登录接口对接登录、获取用户信息、权限码接口的内容可以继续参考 登录文档 与 服务端交互文档。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考