🐛 fix client id persistence issue

This commit is contained in:
landaiqing
2024-09-05 17:05:24 +08:00
parent ec6b0a9c9f
commit 834174c7cb
3 changed files with 37 additions and 46 deletions

View File

@@ -28,13 +28,11 @@ const router: Router = createRouter({
router.beforeEach((to, _from, next) => {
start();
const user = useStore().user;
const client = useStore().client;
const token: string | undefined = user.user.refreshToken;
const userId: string | undefined = user.user.userId;
const clientId: string | undefined = client.getClientId();
// 检查用户是否已登录
const isLoggedIn: boolean = token !== "" && userId !== "" && clientId !== "";
const isLoggedIn: boolean = token !== "" && userId !== "";
if (to.path === '/login' || to.path === '/qrlogin' || to.path === '/resetpass') {
if (isLoggedIn) {

View File

@@ -20,12 +20,12 @@ export const useClientStore = defineStore(
getClientId
};
},
{
// 开启数据持久化
persist: {
key: 'clientId',
storage: localStorage,
paths: ["clientId"],
}
}
// {
// // 开启数据持久化
// persist: {
// key: 'clientId',
// storage: localStorage,
// paths: ["clientId"],
// }
// }
);

View File

@@ -6,11 +6,10 @@ import {localforageStorageAdapter} from "@/utils/alova/adapter/localforageStorag
import {createServerTokenAuthentication} from "alova/client";
import {AxiosError, AxiosResponse} from "axios";
import {handleCode} from "@/utils/errorCode/errorCodeHandler.ts";
import {message, notification} from "ant-design-vue";
import {message} from "ant-design-vue";
import i18n from "@/locales";
import {axiosRequestAdapter} from "@alova/adapter-axios";
import {refreshToken} from "@/api/user";
import router from "@/router/router.ts";
let hasShownNetworkError: boolean = false;
const {onAuthRequired, onResponseRefreshToken} = createServerTokenAuthentication<typeof VueHook,
@@ -18,30 +17,27 @@ const {onAuthRequired, onResponseRefreshToken} = createServerTokenAuthentication
refreshTokenOnSuccess: {
// 在请求前触发将接收到method参数并返回boolean表示token是否过期
isExpired: (response: AxiosResponse<any, any>, _method: any) => {
return response.data.code === 401;
const code = response.data.code;
return code === 401;
},
// 当token过期时触发在此函数中触发刷新token
handler: async () => {
try {
// 刷新token
const user = useStore().user;
const res: any = await refreshToken(user.user?.refreshToken);
if (res.code === 0 && res.data) {
const {access_token, refresh_token, uid} = res.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
} else {
message.error(i18n.global.t('error.loginExpired'));
localStorage.removeItem('user');
router.push('/login').then();
}
} catch (error: any) {
console.error(error);
// 刷新token
const user = useStore().user;
const res: any = await refreshToken(user.user?.refreshToken);
if (res.code === 0 && res.data) {
const {access_token, refresh_token, uid} = res.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
} else {
message.error(i18n.global.t('error.loginExpired'));
localStorage.removeItem('user');
router.push('/login').then();
localStorage.removeItem('clientId');
setTimeout(() => {
window.location.href = '/login';
}, 2000);
}
}
}
@@ -68,8 +64,6 @@ export const service = createAlova({
}
const lang = useStore().lang;
method.config.headers['Accept-Language'] = lang.lang || 'zh';
const client = useStore().client;
method.config.headers['X-Request-Id'] = client.getClientId() || '';
}),
// 响应拦截器
responded: onResponseRefreshToken({
@@ -79,21 +73,20 @@ export const service = createAlova({
}
const {code} = response.data;
if (code === 403) {
notification.error({
placement: 'topRight',
duration: 5,
message: i18n.global.t('error.loginExpired'),
description: i18n.global.t('error.loginExpiredDesc'),
onClose: () => {
localStorage.removeItem('user');
router.push('/login').then();
}
localStorage.removeItem('user');
localStorage.removeItem('clientId');
message.open({
type: 'error',
content: i18n.global.t('error.loginExpired'),
duration: 2,
});
throw new Error('Authentication Expired');
} else {
return response.data;
setTimeout(() => {
window.location.href = '/login';
}, 2000);
return Promise.reject(response.data);
}
return response.data;
},
onError: