🎟实现登录请求

kicc-ui/src/enums/pageEnum.ts

@@ -6,6 +6,8 @@
  */
 
 export enum PageEnum {
+  // 项目根路径
+  ROOT_HOME = '/',
   // 基本登录路径
   BASE_LOGIN = '/login',
   // 基本首页路径

kicc-ui/src/locales/lang/en/routes/basic.ts

@@ -1,4 +1,3 @@
 export default {
   login: 'Login',
-  errorLogList: 'Error Log',
 };

kicc-ui/src/locales/lang/zh-CN/routes/basic.ts

@@ -1,4 +1,3 @@
 export default {
   login: '登录',
-  errorLogList: '错误日志列表',
 };

kicc-ui/src/router/constant.ts

@@ -13,19 +13,12 @@ export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
 
 export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');
 
-/**
- * 默认布局
- */
+/** 默认布局 */
 export const LAYOUT = () => import('/@/layouts/default/index.vue');
 
-/**
- * 父布局
- */
+/** 父布局 */
 export const getParentLayout = (_name?: string) => {
-  return () =>
-    new Promise((resolve) => {
-      resolve({
-        name: PARENT_LAYOUT_NAME,
-      });
+  return () => new Promise((resolve) => {
+      resolve({ name: PARENT_LAYOUT_NAME });
     });
 };

kicc-ui/src/router/guard/permissionGuard.ts

@@ -10,43 +10,34 @@ import type { Router, RouteRecordRaw } from 'vue-router';
 import { usePermissionStoreWithOut } from '/@/store/modules/permission';
 import { PageEnum } from '/@/enums/pageEnum';
 import { useUserStoreWithOut } from '/@/store/modules/user';
-import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
-import { RootRoute } from '/@/router/routes';
-
+import { PAGE_NOT_FOUND_NAME } from '/@/router/constant';
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
-const ROOT_PATH = RootRoute.path;
-const whitePathList: PageEnum[] = [LOGIN_PATH];
+const ROOT_HOME = PageEnum.ROOT_HOME;
+/** 设置路由白名单 */
+const whitePathList: PageEnum[] = [ LOGIN_PATH ];
 
 export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
   router.beforeEach(async (to, from, next) => {
-    if (
-      from.path === ROOT_PATH &&
-      to.path === PageEnum.BASE_HOME &&
-      userStore.getUserInfo.homePath &&
-      userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
-    ) {
+    // 首次登录进来进行跳转页面
+    if (from.path === ROOT_HOME && to.path === PageEnum.BASE_HOME && userStore.getUserInfo.homePath !== PageEnum.BASE_HOME) {
       next(userStore.getUserInfo.homePath);
       return;
     }
-
     // 白名单可直接进入
     if (whitePathList.includes(to.path as PageEnum)) {
       next();
       return;
     }
-
     const token = userStore.getAccessToken;
-
     // 令牌不存在
     if (!token) {
-      // 您可以在未经许可的情况下访问。您需要将路由 meta.ignoreAuth 设置为 true
+      // 您可以在未经许可的情况下访问,您需要将路由meta.ignoreAuth设置为true
       if (to.meta.ignoreAuth) {
         next();
         return;
       }
-
       // 重定向登录页面
       const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
         path: LOGIN_PATH,
@@ -61,31 +52,23 @@ export function createPermissionGuard(router: Router) {
       next(redirectData);
       return;
     }
-
     // 处理完登录后未找到页面直接跳转到404页面
-    if (
-      from.path === LOGIN_PATH &&
-      to.name === PAGE_NOT_FOUND_ROUTE.name &&
-      to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
-    ) {
+    if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_NAME && to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)) {
       next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
       console.log({ from, to });
       return;
     }
-
     if (permissionStore.getIsDynamicAddedRoute) {
       next();
       return;
     }
-
     const routes = await permissionStore.buildRoutesAction();
     routes.forEach((route) => {
       router.addRoute(route as unknown as RouteRecordRaw);
     });
-    router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
     permissionStore.setDynamicAddedRoute(true);
 
-    if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
+    if (to.name === PAGE_NOT_FOUND_NAME) {
       // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
       // fix: 添加query以免丢失
       next({ path: to.fullPath, replace: true, query: to.query });

kicc-ui/src/router/index.ts

@@ -7,32 +7,29 @@
 
 import type { RouteRecordRaw } from 'vue-router';
 import type { App } from 'vue';
-
 import { createRouter, createWebHashHistory } from 'vue-router';
-import { basicRoutes } from './routes';
+import { routesConfig } from './routes';
 
-// 白名单应该包含基本静态路由
-const WHITE_NAME_LIST: string[] = [];
-const getRouteNames = (array: any[]) =>
-  array.forEach((item) => {
-    WHITE_NAME_LIST.push(item.name);
-    getRouteNames(item.children || []);
-  });
-getRouteNames(basicRoutes);
+// 固定路由,设置基础路由不需要被重置掉
+const AFFIX_NAME_LIST: string[] = [];
+const getRouteNames = (array: any[]) => array.forEach((item) => {
+  AFFIX_NAME_LIST.push(item.name);
+  getRouteNames(item.children || []);
+});getRouteNames(routesConfig);
 
-// 应用路由器
+// 应用配置的静态路由
 export const router = createRouter({
   history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH as string),
-  routes: basicRoutes as unknown as RouteRecordRaw[],
+  routes: routesConfig as unknown as RouteRecordRaw[],
   strict: true,
   scrollBehavior: () => ({ left: 0, top: 0 }),
 });
 
-// 重置路由器
+// 重置所有路由,除基础路由外
 export function resetRouter() {
   router.getRoutes().forEach((route) => {
     const { name } = route;
-    if (name && !WHITE_NAME_LIST.includes(name as string)) {
+    if (name && !AFFIX_NAME_LIST.includes(name as string)) {
       router.hasRoute(name) && router.removeRoute(name);
     }
   });

kicc-ui/src/router/routes/basic.ts

@@ -7,56 +7,70 @@
  */
 
 import type { AppRouteRecordRaw } from '/@/router/types';
-import {
-  REDIRECT_NAME,
-  LAYOUT,
-  EXCEPTION_COMPONENT,
-  PAGE_NOT_FOUND_NAME,
-} from '/@/router/constant';
+import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT, PAGE_NOT_FOUND_NAME } from '/@/router/constant';
+import { PageEnum } from "/@/enums/pageEnum";
+import { useI18n } from "/@/hooks/web/useI18n";
+const { t } = useI18n();
 
-// 页面上的 404
-export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
-  path: '/:path(.*)*',
-  name: PAGE_NOT_FOUND_NAME,
-  component: LAYOUT,
-  meta: {
-    title: 'ErrorPage',
-    hideBreadcrumb: true,
-    hideMenu: true,
+/** 基础路由配置 */
+export const basicRoute: AppRouteRecordRaw[] = [
+  {
+    path: PageEnum.ROOT_HOME,
+    name: 'Root',
+    redirect: PageEnum.BASE_HOME,
+    meta: {
+      title: 'Root',
+    }
   },
-  children: [
-    {
-      path: '/:path(.*)*',
-      name: PAGE_NOT_FOUND_NAME,
-      component: EXCEPTION_COMPONENT,
-      meta: {
-        title: 'ErrorPage',
-        hideBreadcrumb: true,
-        hideMenu: true,
-      },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('/@/views/sys/login/Login.vue'),
+    meta: {
+      title: t('routes.basic.login'),
+    }
+  },
+  {
+    path: '/:path(.*)*',
+    name: PAGE_NOT_FOUND_NAME,
+    component: LAYOUT,
+    meta: {
+      title: 'ErrorPage',
+      hideBreadcrumb: true,
+      hideMenu: true,
     },
-  ],
-};
-
-export const REDIRECT_ROUTE: AppRouteRecordRaw = {
-  path: '/redirect',
-  name: REDIRECT_NAME,
-  component: LAYOUT,
-  meta: {
-    title: REDIRECT_NAME,
-    hideBreadcrumb: true,
-    hideMenu: true,
+    children: [
+      {
+        path: '/:path(.*)*',
+        name: PAGE_NOT_FOUND_NAME,
+        component: EXCEPTION_COMPONENT,
+        meta: {
+          title: 'ErrorPage',
+          hideBreadcrumb: true,
+          hideMenu: true,
+        }
+      }
+    ]
   },
-  children: [
-    {
-      path: '/redirect/:path(.*)',
-      name: REDIRECT_NAME,
-      component: () => import('/@/views/sys/redirect/index.vue'),
-      meta: {
-        title: REDIRECT_NAME,
-        hideBreadcrumb: true,
-      },
+  {
+    path: '/redirect',
+    name: REDIRECT_NAME,
+    component: LAYOUT,
+    meta: {
+      title: REDIRECT_NAME,
+      hideBreadcrumb: true,
+      hideMenu: true,
     },
-  ],
-};
-
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        name: REDIRECT_NAME,
+        component: () => import('/@/views/sys/redirect/index.vue'),
+        meta: {
+          title: REDIRECT_NAME,
+          hideBreadcrumb: true,
+        }
+      }
+    ]
+  }
+];

kicc-ui/src/router/routes/index.ts

@@ -5,16 +5,9 @@
  * @create: 2022/4/9
  */
 
-import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
-
-import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
-
-import { PageEnum } from '/@/enums/pageEnum';
-import {useI18n} from "/@/hooks/web/useI18n";
-const { t } = useI18n();
-
+import type { AppRouteModule } from '/@/router/types';
+import { basicRoute } from './basic';
 const modules = import.meta.globEager('./modules/**/*.ts');
-
 const routeModuleList: AppRouteModule[] = [];
 
 Object.keys(modules).forEach((key) => {
@@ -23,30 +16,7 @@ Object.keys(modules).forEach((key) => {
   routeModuleList.push(...modList);
 });
 
-export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
-
-export const RootRoute: AppRouteRecordRaw = {
-  path: '/',
-  name: 'Root',
-  redirect: PageEnum.BASE_HOME,
-  meta: {
-    title: 'Root',
-  },
-};
-
-export const LoginRoute: AppRouteRecordRaw = {
-  path: '/login',
-  name: 'Login',
-  component: () => import('/@/views/sys/login/Login.vue'),
-  meta: {
-    title: t('routes.basic.login'),
-  },
-};
-
-// 白名单未经许可的基本路由
-export const basicRoutes = [
-  LoginRoute,
-  RootRoute,
-  REDIRECT_ROUTE,
-  PAGE_NOT_FOUND_ROUTE,
+export const routesConfig = [
+  ...basicRoute,
+  ...routeModuleList
 ];

kicc-ui/src/router/routes/modules/dashboard.ts

@@ -6,7 +6,6 @@
  */
 
 import type { AppRouteModule } from '/@/router/types';
-
 import { LAYOUT } from '/@/router/constant';
 import {useI18n} from "/@/hooks/web/useI18n";
 const { t } = useI18n();

kicc-ui/src/store/modules/multipleTab.ts

@@ -12,7 +12,7 @@ import { store } from '/@/store';
 import { useGo, useRedo } from '/@/hooks/web/usePage';
 import { Persistent } from '/@/utils/cache/persistent';
 import { PageEnum } from '/@/enums/pageEnum';
-import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
+import { PAGE_NOT_FOUND_NAME, REDIRECT_NAME } from '/@/router/constant';
 import { getRawRoute } from '/@/utils';
 import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum';
 import projectSetting from '/@/settings/projectSetting';
@@ -117,7 +117,7 @@ export const useMultipleTabStore = defineStore({
         path === PageEnum.ERROR_PAGE ||
         path === PageEnum.BASE_LOGIN ||
         !name ||
-        [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string)
+        [REDIRECT_NAME, PAGE_NOT_FOUND_NAME].includes(name as string)
       ) {
         return;
       }

kicc-ui/src/store/modules/permission.ts

@@ -13,7 +13,6 @@ import { useI18n } from '/@/hooks/web/useI18n';
 import { useUserStore } from './user';
 import { transformObjToRoute } from '/@/router/helper/routeHelper';
 import { transformRouteToMenu } from '/@/router/helper/menuHelper';
-import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 import { filter } from '/@/utils/helper/treeHelper';
 import { getMenuList } from '/@/api/sys/menu';
 import { useMessage } from '/@/hooks/web/useMessage';
@@ -68,7 +67,6 @@ export const usePermissionStore = defineStore({
     async buildRoutesAction(): Promise<AppRouteRecordRaw[]> {
       const { t } = useI18n();
       const userStore = useUserStore();
-      let routes: AppRouteRecordRaw[] = [];
       const routeRemoveIgnoreFilter = (route: AppRouteRecordRaw) => {
         const { meta } = route;
         const { ignoreRoute } = meta || {};
@@ -119,9 +117,8 @@ export const usePermissionStore = defineStore({
         this.setMenuList(menuList);
         // 过滤忽略路由配置项,只构建菜单不构建路由
         routeList = filter(routeList, routeRemoveIgnoreFilter);
-        routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
-        patchHomeAffix(routes);
-        return routes;
+        patchHomeAffix(routeList);
+        return routeList;
       }).catch(error => {
         console.error(error);
       })) as AppRouteRecordRaw[];

kicc-ui/src/store/modules/user.ts

@@ -18,7 +18,6 @@ import {useMessage} from '/@/hooks/web/useMessage';
 import {router} from '/@/router';
 import {usePermissionStore} from '/@/store/modules/permission';
 import {RouteRecordRaw} from 'vue-router';
-import {PAGE_NOT_FOUND_ROUTE} from '/@/router/routes/basic';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -118,7 +117,6 @@ export const useUserStore = defineStore({
             routes.forEach((route) => {
               router.addRoute(route as unknown as RouteRecordRaw);
             });
-            router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
             permissionStore.setDynamicAddedRoute(true);
           }
           await router.replace(userInfo.homePath || PageEnum.BASE_HOME);