fix: 退出登录状态清理

cumt-robin · Apr 30, 2024 · 9cd1c89 · 9cd1c89
1 parent 48c49fb
commit 9cd1c89
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue3-ts-blog-frontend",
-    "version": "1.0.1",
+    "version": "2.0.2",
     "scripts": {
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
@@ -35,6 +35,7 @@
         "jshashes": "^1.0.8",
         "lodash-es": "^4.17.21",
         "marked": "^2.1.3",
+        "mitt": "^3.0.1",
         "qs": "^6.10.1",
         "socket.io-client": "^2.1.1",
         "vue": "~3.0.11",

diff --git a/src/App.vue b/src/App.vue
@@ -12,22 +12,31 @@
 
 <script lang="ts">
 import { computed, defineComponent } from "vue";
-import { useStore } from "vuex";
 import zhCN from "ant-design-vue/es/locale/zh_CN";
 import { useRoute } from "vue-router";
 import { ConfigProvider } from "ant-design-vue";
-import { key } from "@/store";
+import { eventBus } from "./utils/eventbus";
+import { useBaseStore } from "@/store";
+import { CLEAR_USER_SESSION } from "@/store/constants";
 
 export default defineComponent({
     components: {
-        [ConfigProvider.name]: ConfigProvider,
+        [ConfigProvider.name as string]: ConfigProvider,
     },
     setup() {
         // vuex
-        const store = useStore(key);
+        const store = useBaseStore();
         // route
         const route = useRoute();
 
+        const handleEvents = () => {
+            eventBus.on("sessionInvalid", () => {
+                store.dispatch(CLEAR_USER_SESSION);
+            });
+        };
+
+        handleEvents();
+
         const isAdmin = computed(() => route.meta.isAdmin as boolean);
 
         const isMenuVisible = computed(() => store.state.isMenuVisible);

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -3,7 +3,6 @@
  * @description: 路由配置
  */
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import Cookies from "js-cookie";
 import { backendRoute } from "./backend";
 import { FALLBACK_ROUTE, NOT_FOUND_ROUTE } from "./not-found";
 import store from "@/store";

diff --git a/src/services/index.ts b/src/services/index.ts
@@ -7,6 +7,7 @@ import { CommonResponse } from "@/bean/xhr";
 import { PlainObject } from "@/bean/base";
 import { requestParamsFilter } from "@/utils/helper";
 import router from "@/router";
+import { eventBus } from "@/utils/eventbus";
 
 enum InnerCode {
     Unauthorized = "000001",
@@ -47,6 +48,7 @@ api.interceptors.response.use(
                 case InnerCode.Unauthorized:
                 case InnerCode.TokenExpired:
                 case InnerCode.Forbidden:
+                    eventBus.emit("sessionInvalid");
                     router.push("/login");
                     break;
             }

diff --git a/src/store/constants.ts b/src/store/constants.ts
@@ -15,3 +15,5 @@ export const SET_USER_TOKEN = "setUserToken";
 export const LOGIN_ACTION = "loginAction";
 
 export const LOGOUT_ACTION = "logoutAction";
+
+export const CLEAR_USER_SESSION = "clearUserSession";
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -3,8 +3,16 @@
  * @description: 状态管理
  */
 import { InjectionKey } from "vue";
-import { createStore, Store, ActionContext } from "vuex";
-import { SET_IS_MENU_VISIBLE, SET_COMMENT_USER_INFO, SET_USER_INFO, SET_USER_TOKEN, LOGIN_ACTION, LOGOUT_ACTION } from "./constants";
+import { createStore, Store, ActionContext, useStore } from "vuex";
+import {
+    SET_IS_MENU_VISIBLE,
+    SET_COMMENT_USER_INFO,
+    SET_USER_INFO,
+    SET_USER_TOKEN,
+    LOGIN_ACTION,
+    LOGOUT_ACTION,
+    CLEAR_USER_SESSION,
+} from "./constants";
 import { CommentUserInfo, UserDTO } from "@/bean/dto";
 import { userService } from "@/services/user";
 import { LoginModel } from "@/bean/xhr";
@@ -84,12 +92,17 @@ const store = createStore<RootState>({
             return userInfo;
         },
         // 用户登出
-        async [LOGOUT_ACTION]({ commit }: ActionContext<RootState, RootState>): Promise<void> {
+        async [LOGOUT_ACTION]({ dispatch }: ActionContext<RootState, RootState>): Promise<void> {
             await userService.logout();
+            dispatch(CLEAR_USER_SESSION);
+        },
+        async [CLEAR_USER_SESSION]({ commit }: ActionContext<RootState, RootState>): Promise<void> {
             commit(SET_USER_TOKEN, null);
             commit(SET_USER_INFO, null);
         },
     },
 });
 
 export default store;
+
+export const useBaseStore = (): Store<RootState> => useStore(key);
diff --git a/src/utils/eventbus.ts b/src/utils/eventbus.ts
@@ -0,0 +1,8 @@
+import mitt from "mitt";
+
+type Events = {
+    // key 是事件名，类型是事件传值的类型
+    sessionInvalid: void;
+};
+
+export const eventBus = mitt<Events>();
diff --git a/src/views/chatgpt/index.vue b/src/views/chatgpt/index.vue
@@ -225,29 +225,29 @@ export default defineComponent({
             };
         };
 
-        const sendChatContentV1 = async () => {
-            msgList.value.push({
-                time: format(new Date(), "HH:mm:ss"),
-                user: "我说",
-                content: chatForm.chatContent,
-                type: "mine",
-                customClass: "mine",
-            });
-            loading.value = true;
-            try {
-                const { result } = await chatgptService.chatV1({ wd: chatForm.chatContent });
-                msgList.value.push({
-                    time: format(new Date(), "HH:mm:ss"),
-                    user: "Chat AI",
-                    content: result,
-                    type: "others",
-                    customClass: "others",
-                });
-            } finally {
-                loading.value = false;
-                chatFormRef.value.resetFields();
-            }
-        };
+        // const sendChatContentV1 = async () => {
+        //     msgList.value.push({
+        //         time: format(new Date(), "HH:mm:ss"),
+        //         user: "我说",
+        //         content: chatForm.chatContent,
+        //         type: "mine",
+        //         customClass: "mine",
+        //     });
+        //     loading.value = true;
+        //     try {
+        //         const { result } = await chatgptService.chatV1({ wd: chatForm.chatContent });
+        //         msgList.value.push({
+        //             time: format(new Date(), "HH:mm:ss"),
+        //             user: "Chat AI",
+        //             content: result,
+        //             type: "others",
+        //             customClass: "others",
+        //         });
+        //     } finally {
+        //         loading.value = false;
+        //         chatFormRef.value.resetFields();
+        //     }
+        // };
 
         const onKeydownChat = (e) => {
             if (loading.value) {

diff --git a/yarn.lock b/yarn.lock
@@ -9373,6 +9373,11 @@ mitt@^2.1.0:
   resolved "https://registry.npmmirror.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
   integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.npmmirror.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"