Vben5登录过期无法再次登录问题，http状态码

个人博客：无奈何杨（wnhyang）

个人语雀：wnhyang

共享语雀：在线知识共享

Github：wnhyang - Overview

前言

最近在做项目前端，使用的https://doc.vben.pro/，在登录过期时出现了无法再次登录的问题，在此记录一下。

项目前面那些直接略过，如果感兴趣直接看官方文档就可以，以下会根据解决过程附带部分官网说明。

分析原因

梳理流程

文档前面的都已按照要求配置修改好了，所有的认证接口也都完成了，登录也是没有问题的，就是在accessToken过期的时候无法回到登录页面，就算直接路由到/auth/login也永远在转圈圈。

在本项目中，在登录完成后将accessToken使用pinia加持久化插件存储到localStorage中，

// 项目配置 setup.ts/*** @zh_CN 初始化pinia*/
export async function initStores(app: App, options: InitStoreOptions) {const { createPersistedState } = await import('pinia-plugin-persistedstate');pinia = createPinia();const { namespace } = options;pinia.use(createPersistedState({// key $appName-$store.idkey: (storeKey) => `${namespace}-${storeKey}`,storage: localStorage,}),);app.use(pinia);return pinia;
}// 认证相关 access.ts
...persist: {// 持久化pick: ['accessToken', 'refreshToken', 'accessCodes'],},state: (): AccessState => ({accessCodes: [],accessMenus: [],accessRoutes: [],accessToken: null,isAccessChecked: false,loginExpired: false,refreshToken: null,}),
});

然后在每次请求时使用自定义配置了请求拦截器和响应拦截器的axios中带上accessToken，

// axios配置 request.tsfunction formatToken(token: null | string) {return token ? `Bearer ${token}` : null;}// 请求头处理client.addRequestInterceptor({fulfilled: async (config) => {const accessStore = useAccessStore();config.headers.Authorization = formatToken(accessStore.accessToken);config.headers['Accept-Language'] = preferences.app.locale;return config;},});// response数据解构client.addResponseInterceptor<HttpResponse>({fulfilled: (response) => {const { data: responseData, status } = response;const { code, data } = responseData;if (status >= 200 && status < 400 && code === 0) {return data;}throw Object.assign({}, response, { response });},});

在此都没问题，因为使用登录和其他接口请求和响应都没问题，问题到底在哪？

后端命名也是正常接收到accessToken了呀，为什么永远在转圈圈，回不去了呢？

那既然这样，只能使出我并没把握的前端debug了。

debug

根据前面的[Vue Router warn]: Unexpected error when starting the router: {code: 401, msg: '账号未登录'}的输出和错误栈，大概可以知道是在bootstrap.ts:33出问题了，那么先在这断一下，结合代码判断，这一步就是设置路由啊，可知一定是初始化路由出错了，导致所有路由都出问题了。

那么在创建路由再加上断点，在export之前操作router都点一下

发现可以到下面的创建路由守卫处，说明前面都还没错，那么就继续分析路由守卫

在继续debug中发现，在到达96行之前就提示错误，开始转圈圈了，那么错误一定是89-96之间的。

最后发现是在fetchUserInfo后出错的，更准确的讲是getUserInfoApi出错的。

async function fetchUserInfo() {let userInfo: null | UserInfo = null;userInfo = await getUserInfoApi();userStore.setUserInfo(userInfo);return userInfo;
}/*** 获取用户信息*/
export async function getUserInfoApi() {return requestClient.get<UserInfo>('/user/info');
}

？？？不是已经正常返回了吗？我也提示账号未登录了啊，那一定是response的问题，继续看axios配置，这里设置三个拦截器，看其中token过期的处理响应拦截器，正常应该走doReAuthenticate重新认证逻辑啊，怎么不行呢？

// response数据解构client.addResponseInterceptor<HttpResponse>({fulfilled: (response) => {const { data: responseData, status } = response;const { code, data } = responseData;if (status >= 200 && status < 400 && code === 0) {return data;}throw Object.assign({}, response, { response });},});// token过期的处理client.addResponseInterceptor(authenticateResponseInterceptor({client,doReAuthenticate,doRefreshToken,enableRefreshToken: preferences.app.enableRefreshToken,formatToken,}),);// 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里client.addResponseInterceptor(errorMessageResponseInterceptor((msg: string, error) => {// 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg// 当前mock接口返回的错误字段是 error 或者 messageconst responseData = error?.response?.data ?? {};const errorMessage = responseData?.error ?? responseData?.msg ?? '';// 如果没有错误信息，则会根据状态码进行提示message.error(errorMessage || msg);}),);

authenticateResponseInterceptor响应拦截器细看，终于抓到你了，没有进入重新认证的逻辑是因为在

response?.status !== 401为true直接抛异常了。

啊啊啊啊，响应码不就是401吗？好吧，还真不是。

根因

根因就是我使用了后端的统一响应处理，将所有异常都以正常的响应返回，也就是说并没有使用http的响应码，所有能被后端处理的异常都会以响应体里的code来表示。

/*** 认证失败*/
@ExceptionHandler(NotLoginException.class)
public CommonResult<Void> handleNotLoginException(NotLoginException e, HttpServletRequest request) {String requestUri = request.getRequestURI();log.error("请求地址'{}',认证失败'{}',无法访问系统资源", requestUri, e.getMessage());return CommonResult.error(UNAUTHORIZED);
}

可是这个项目中使用了http状态码，也是axios的status

export interface AxiosResponse<T = any, D = any> {data: T;status: number;statusText: string;headers: RawAxiosResponseHeaders | AxiosResponseHeaders;config: InternalAxiosRequestConfig<D>;request?: any;
}