chore: handle logout

vbenjs · Aug 16, 2024 · 0b51d2b · 0b51d2b
1 parent 71ac59f
commit 0b51d2b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 52 deletions.
diff --git a/apps/backend-mock/utils/jwt_utils.ts b/apps/backend-mock/utils/jwt_utils.ts
@@ -10,7 +10,7 @@ export interface UserPayload extends UserInfo {
 }
 
 export function generateAccessToken(user: UserInfo) {
-  return jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, { expiresIn: '10s' });
+  return jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, { expiresIn: '2h' });
 }
 
 export function generateRefreshToken(user: UserInfo) {

diff --git a/apps/web-antd/src/api/request.ts b/apps/web-antd/src/api/request.ts
@@ -7,6 +7,8 @@ import { BaseRequestClient, type HttpResponse } from '@vben/request';
 import { RequestClient } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
+import { message } from 'ant-design-vue';
+
 import { refreshTokenApi } from '#/api/core';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
@@ -24,21 +26,9 @@ function createRequestClient(baseURL: string) {
             token: `${accessStore.accessToken}`,
           };
         },
-        unAuthorizedHandler: async () => {
-          // const accessStore = useAccessStore();
-          // const authStore = useAuthStore();
-          // accessStore.setAccessToken(null);
-          //
-          // if (preferences.app.loginExpiredMode === 'modal') {
-          //   accessStore.setLoginExpired(true);
-          // } else {
-          //   // 退出登录
-          //   await authStore.logout();
-          // }
-        },
       };
     },
-    // makeErrorMessage: (msg) => message.error(msg),
+    makeErrorMessage: (msg) => message.error(msg),
 
     makeRequestHeaders: () => {
       return {

diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
@@ -4,7 +4,6 @@ import type { NotificationItem } from '@vben/layouts';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { LOGIN_PATH, VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
@@ -14,17 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import {
-  resetAllStores,
-  storeToRefs,
-  useAccessStore,
-  useUserStore,
-} from '@vben/stores';
+import { resetAllStores, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
+import { logoutApi } from '#/api';
 import { $t } from '#/locales';
 import { resetRoutes } from '#/router';
-import { useAuthStore } from '#/store';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -58,8 +52,6 @@ const notifications = ref<NotificationItem[]>([
 ]);
 
 const userStore = useUserStore();
-const authStore = useAuthStore();
-const accessStore = useAccessStore();
 const showDot = computed(() =>
   notifications.value.some((item) => !item.isRead),
 );
@@ -94,15 +86,15 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
 
 const router = useRouter();
 
 async function handleLogout() {
+  await logoutApi();
+
   resetAllStores();
   resetRoutes();
   await router.replace(LOGIN_PATH);
@@ -137,16 +129,6 @@ function handleMakeAll() {
         @make-all="handleMakeAll"
       />
     </template>
-    <template #extra>
-      <AuthenticationLoginExpiredModal
-        v-model:open="accessStore.loginExpired"
-        :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
-    </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />
     </template>

diff --git a/packages/effects/request/src/request-client/request-client.ts b/packages/effects/request/src/request-client/request-client.ts
@@ -3,16 +3,8 @@ import type {
   AxiosRequestConfig,
   AxiosResponse,
   CreateAxiosDefaults,
-  InternalAxiosRequestConfig,
 } from 'axios';
 
-import type {
-  MakeAuthorizationFn,
-  MakeErrorMessageFn,
-  MakeRequestHeadersFn,
-  RequestClientOptions,
-} from './types';
-
 import { $t } from '@vben/locales';
 import { merge } from '@vben/utils';
 
@@ -21,6 +13,13 @@ import axios from 'axios';
 import { FileDownloader } from './modules/downloader';
 import { InterceptorManager } from './modules/interceptor';
 import { FileUploader } from './modules/uploader';
+import {
+  type MakeAuthorizationFn,
+  type MakeErrorMessageFn,
+  type MakeRequestHeadersFn,
+  type RequestClientOptions,
+  type RequestConfigType,
+} from './types';
 
 class BaseRequestClient {
   protected instance: AxiosInstance;
@@ -153,7 +152,7 @@ class RequestClient extends BaseRequestClient {
 
   private setupDefaultResponseInterceptor() {
     this.addRequestInterceptor(
-      (config: InternalAxiosRequestConfig) => {
+      (config: RequestConfigType) => {
         const authorization = this.makeAuthorization?.(config);
         if (authorization) {
           const { token } = authorization.tokenHandler?.() ?? {};
@@ -194,40 +193,38 @@ class RequestClient extends BaseRequestClient {
           return Promise.reject(error);
         }
 
-        let errorMessage = error?.response?.data?.error?.message ?? '';
+        let errorMessage = '';
         const status = error?.response?.status;
 
         switch (status) {
           case 400: {
             errorMessage = $t('fallback.http.badRequest');
             break;
           }
-
           case 401: {
-            errorMessage = $t('fallback.http.unauthorized');
-            this.makeAuthorization?.().unAuthorizedHandler?.();
+            // TODO if not use refreshToken
+            // errorMessage = $t('fallback.http.unauthorized');
+            // this.makeAuthorization?.().unAuthorizedHandler?.();
             break;
           }
           case 403: {
             errorMessage = $t('fallback.http.forbidden');
             break;
           }
-          // 404请求不存在
           case 404: {
             errorMessage = $t('fallback.http.notFound');
             break;
           }
           case 408: {
             errorMessage = $t('fallback.http.requestTimeout');
-
             break;
           }
           default: {
             errorMessage = $t('fallback.http.internalServerError');
           }
         }
 
-        this.makeErrorMessage?.(errorMessage);
+        errorMessage && this.makeErrorMessage?.(errorMessage);
         return Promise.reject(error);
       },
     );