fix: router redirect error when logout #98

package.json

@@ -34,8 +34,8 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@vueuse/core": "^8.3.1",
     "ant-design-vue": "3.2.2",
-    "axios": "^0.27.1",
-    "core-js": "^3.22.2",
+    "axios": "^0.27.2",
+    "core-js": "^3.22.3",
     "dayjs": "^1.11.1",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.21",
@@ -53,10 +53,10 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
+    "@commitlint/cli": "^16.2.4",
+    "@commitlint/config-conventional": "^16.2.4",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.29",
+    "@types/node": "^17.0.30",
     "@types/webpack-env": "^1.16.4",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
@@ -70,7 +70,7 @@
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.2.2",
     "cross-env": "^7.0.3",
-    "cz-git": "^1.2.3",
+    "cz-git": "^1.2.8",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "2.26.0",
@@ -86,15 +86,15 @@
     "prettier": "^2.6.2",
     "regenerator-runtime": "^0.13.9",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "stylelint": "^14.8.0",
+    "stylelint": "^14.8.1",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
     "svg-sprite-loader": "^6.0.11",
-    "typescript": "^4.6.3",
+    "typescript": "^4.6.4",
     "unplugin-vue-define-options": "^0.6.1",
     "vue-cli-plugin-windicss": "^1.1.4",
     "vue-eslint-parser": "^8.3.0"

src/components/core/dynamic-table/src/hooks/useTable.tsx

@@ -35,7 +35,7 @@ export function useTable(props?: Partial<DynamicTableProps>) {
       if (Reflect.has(target, key)) {
         return unref(target);
       }
-      if (Reflect.has(target.value, key)) {
+      if (target.value && Reflect.has(target.value, key)) {
         return target.value[key];
       }
       return async (...rest) => {

src/layout/header/index.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script lang="tsx" setup>
-  import { computed, type CSSProperties } from 'vue';
+  import { computed, nextTick, type CSSProperties } from 'vue';
   import { useRouter, useRoute, RouteRecordRaw } from 'vue-router';
   import {
     QuestionCircleOutlined,
@@ -85,6 +85,7 @@
   import { Search, FullScreen, ProjectSetting } from './components/';
   import { LocalePicker } from '@/components/basic/locale-picker';
   import { useUserStore } from '@/store/modules/user';
+  import { useKeepAliveStore } from '@/store/modules/keepAlive';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { LOGIN_NAME } from '@/router/constant';
   import { TitleI18n } from '@/components/basic/title-i18n';
@@ -102,6 +103,7 @@
   const userStore = useUserStore();
   const themeStore = useThemeStore();
   const lockscreenStore = useLockscreenStore();
+  const keepAliveStore = useKeepAliveStore();
 
   const router = useRouter();
   const route = useRoute();
@@ -188,9 +190,11 @@
           // logout({})
           await userStore.logout();
         }
-        message.success('成功退出登录');
+        keepAliveStore.clear();
         // 移除标签页
         localStorage.clear();
+        message.success('成功退出登录');
+        await nextTick();
         router.replace({
           name: LOGIN_NAME,
           query: {

src/layout/routerView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <router-view v-slot="{ Component }">
+    <!-- <router-view v-slot="{ Component }">
       <template v-if="Component">
         <transition mode="out-in">
           <suspense>
@@ -11,7 +11,7 @@
           </suspense>
         </transition>
       </template>
-    </router-view>
+    </router-view> -->
   </div>
 </template>
 

src/router/generator-router.tsx

@@ -114,7 +114,7 @@ export const generatorDynamicRouter = (asyncMenus: API.Menu[]) => {
       .getRoutes()
       .filter(
         (item) =>
-          (!item.children.length || Object.is(item.meta.hideChildrenInMenu, true)) &&
+          (!item.children.length || Object.is(item.meta?.hideChildrenInMenu, true)) &&
           !outsideLayout.some((n) => n.name === item.name),
       );
     // 清空所有路由

src/router/router-guards.ts

@@ -65,6 +65,7 @@ export function createRouterGuards(router: Router, whiteNameList: WhiteNameList)
 
   router.afterEach((to, from, failure) => {
     const keepAliveStore = useKeepAliveStore();
+    const token = Storage.get(ACCESS_TOKEN_KEY, null);
 
     if (isNavigationFailure(failure)) {
       console.error('failed navigation', failure);
@@ -92,6 +93,10 @@ export function createRouterGuards(router: Router, whiteNameList: WhiteNameList)
       const componentName = getComponentName(from);
       componentName && keepAliveStore.remove(componentName);
     }
+    // 如果用户已登出，则清空所有缓存的组件
+    if (!token) {
+      keepAliveStore.clear();
+    }
     NProgress.done(); // finish progress bar
   });
 

src/views/demos/tables/search-table/index.vue

@@ -35,7 +35,7 @@
           ...params,
         });
         // 手动设置搜索表单的搜索项
-        dynamicTableInstance?.getQueryFormRef()?.updateSchema([
+        dynamicTableInstance?.getQueryFormRef()?.updateSchema?.([
           {
             field: 'price',
             componentProps: {

src/views/demos/tables/wzry-table/index.vue

@@ -87,7 +87,7 @@
     const { data } = await getWzryHeroList(params);
 
     tableData = data.list;
-    dynamicTableInstance?.getQueryFormRef()?.updateSchema([
+    dynamicTableInstance?.getQueryFormRef()?.updateSchema?.([
       {
         field: 'skin_name',
         componentProps: {