♻️ reconstruct the authentication mode

src/api/user/index.ts

@@ -114,8 +114,9 @@ export const wechatOffiaccountLoginApi = (param: WechatOffiaccountLogin) => {
  */
 export const generateQrCode = (clientId: string) => {
     return service.Post('/api/user/wechat/offiaccount/qrcode', {
-            client_id: clientId
+        client_id: clientId
-        }, {
+        },
+        {
             cacheFor: 60 * 60 * 24,
             meta: {
                 ignoreToken: true,

src/router/router.ts

@@ -29,7 +29,7 @@ const router: Router = createRouter({
 router.beforeEach((to, _from, next) => {
     // start();
     const user = useStore().user;
-    const token: string | undefined = user.token;
+    const token: string | undefined = user.token.accessToken;
     const userId: string | undefined = user.user.uid;
 
     // 检查用户是否已登录

src/store/modules/userStore.ts

@@ -14,7 +14,10 @@ export const useAuthStore = defineStore(
             avatar: '',
             status: '',
         });
-        const token: any = ref<string>('');
+        const token: any = reactive({
+            accessToken: '',
+            expireAt: '',
+        });
         const clientId = ref<string>('');
         const githubRedirectUrl = ref<string>('');
         const giteeRedirectUrl = ref<string>('');
@@ -70,13 +73,14 @@ export const useAuthStore = defineStore(
             if (typeof e.data === 'string') {
                 const res: any = JSON.parse(e.data);
                 if (res && res.code === 200) {
-                    const {uid, access_token, username, avatar, nickname, status} = res.data;
+                    const {uid, access_token, expire_at, username, avatar, nickname, status} = res.data;
                     user.uid = uid;
                     user.username = username;
                     user.avatar = avatar;
                     user.nickname = nickname;
                     user.status = status;
-                    token.value = access_token;
+                    token.accessToken = access_token;
+                    token.expireAt = expire_at;
                     message.success(t('login.loginSuccess'));
                     window.removeEventListener("message", messageHandler);
                     setTimeout(() => {
@@ -126,7 +130,8 @@ export const useAuthStore = defineStore(
         }
 
         function clear() {
-            token.value = "";
+            token.accessToken = "";
+            token.expireAt = "";
             user.avatar = "";
             user.uid = "";
             user.username = "";

src/utils/alova/service.ts

@@ -1,5 +1,5 @@
 import {createAlova} from 'alova';
-
+import CryptoJS from 'crypto-js';
 import VueHook from 'alova/vue';
 import useStore from "@/store";
 import {localforageStorageAdapter} from "@/utils/alova/adapter/localforageStorageAdapter.ts";
@@ -28,7 +28,9 @@ const {onAuthRequired, onResponseRefreshToken} = createServerTokenAuthentication
             const user = useStore().user;
             const res: any = await refreshToken();
             if (res && res.code === 200) {
-                user.token = res.data;
+                const {access_token, expire_at} = res.data;
+                user.token.accessToken = access_token;
+                user.token.expireAt = expire_at;
             }
         }
     }
@@ -46,11 +48,16 @@ export const service = createAlova({
     beforeRequest: onAuthRequired(async (method: any) => {
         if (!method.meta?.ignoreToken) {
             const user = useStore().user;
-            method.config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${user.token}`;
+            method.config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${user.token.accessToken}`;
             method.config.headers['X-UID'] = user.user.uid;
+            method.config.headers['X-Expire-At'] = user.token.expireAt;
         }
         const lang = useStore().lang;
         method.config.headers['Accept-Language'] = lang.lang || 'zh';
+
+        // 令牌
+        method.config.headers['X-Nonce'] = CryptoJS.lib.WordArray.random(16).toString();
+
         if (method.meta?.signature) {
             method.config.headers['X-Content-Security'] = generateKeySecretSignature(0, method.type, method.url, method.config.params, method.data);
         }

src/views/Login/LoginPage.vue

@@ -378,7 +378,8 @@ async function phoneLoginSubmit() {
           userStore.user.avatar = res.data.avatar;
           userStore.user.nickname = res.data.nickname;
           userStore.user.status = res.data.status;
-          userStore.token = res.data.access_token;
+          userStore.token.accessToken = res.data.access_token;
+          userStore.token.expireAt = res.data.expire_at;
           message.success(t('login.loginSuccess'));
           loginLoading.value = false;
           setTimeout(() => {
@@ -465,7 +466,8 @@ async function checkAccountLoginCaptcha(angle: number) {
     userStore.user.avatar = res.data.avatar;
     userStore.user.nickname = res.data.nickname;
     userStore.user.status = res.data.status;
-    userStore.token = res.data.access_token;
+    userStore.token.accessToken = res.data.access_token;
+    userStore.token.expireAt = res.data.expire_at;
     message.success(t('login.loginSuccess'));
     loginLoading.value = false;
     showAccountRotateCaptcha.value = false;

src/views/QRLogin/QRLogin.vue

@@ -93,19 +93,20 @@ async function handleListenMessage() {
   websocket.on('message', async (res: any) => {
     if (res && res.code === 200) {
       qrStatus.value = 'scanned';
-      const {openid, client_id } = res.data;
+      const {openid, client_id} = res.data;
       const param: WechatOffiaccountLogin = {
         openid: openid,
         client_id: client_id
       };
       const response: any = await wechatOffiaccountLoginApi(param);
-      const {uid, access_token, username, avatar, nickname, status} = response.data;
+      const {uid, access_token, expire_at, username, avatar, nickname, status} = response.data;
       userStore.user.uid = uid;
       userStore.user.username = username;
       userStore.user.avatar = avatar;
       userStore.user.nickname = nickname;
       userStore.user.status = status;
-      userStore.token = access_token;
+      userStore.token.accessToken = access_token;
+      userStore.token.expireAt = expire_at;
       message.success(t('login.loginSuccess'));
       setTimeout(() => {
         router.push('/main/photo/all');

src/views/Upscale/index.vue

@@ -29,7 +29,7 @@ const upscale = useStore().upscale;
 const img = new Image();
 const wsOptions = {
   url: import.meta.env.VITE_FILE_SOCKET_URL + "?user_id=" + user.user.uid,
-  protocols: [user.token],
+  protocols: [user.token.accessToken],
 };
 
 onMounted(() => {