vue-vben-admin 如何配置登录认证过期后的处理方式-创锋一号

vue-vben-admin 如何配置登录认证过期后的处理方式

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's 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为true：

import { 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文件注释标明该文件可自行根据业务逻辑调整），控制台的日志文案和行为以你自己的实现为准，本文的验证方式只适用于文档给出的默认实现。

更多登录接口对接（登录、获取用户信息、权限码接口）的内容，可以继续参考登录文档与服务端交互文档。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析