feat(projects): 1.0 beta

src/router/guard/permission.ts

@@ -1,70 +1,141 @@
-import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
-import { routeName } from '@/router';
-import { useAuthStore } from '@/store';
-import { exeStrategyActions, localStg } from '@/utils';
-import { createDynamicRouteGuard } from './dynamic';
+import type { Router, NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
+import type { RouteKey, RoutePath } from '@elegant-router/types';
+import { useAuthStore } from '@/store/modules/auth';
+import { useRouteStore } from '@/store/modules/route';
+import { localStg } from '@/utils/storage';
 
-/** 处理路由页面的权限 */
-export async function createPermissionGuard(
+export function createPermissionGuard(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    const pass = await createAuthRouteGuard(to, from, next);
+
+    if (!pass) return;
+
+    // 1. route with href
+    if (to.meta.href) {
+      window.open(to.meta.href, '_blank');
+      next({ path: from.fullPath, replace: true, query: from.query, hash: to.hash });
+    }
+
+    const authStore = useAuthStore();
+
+    const isLogin = Boolean(localStg.get('token'));
+    const needLogin = !to.meta.constant;
+    const routeRoles = to.meta.roles || [];
+    const rootRoute: RouteKey = 'root';
+    const loginRoute: RouteKey = 'login';
+    const noPermissionRoute: RouteKey = '403';
+
+    const SUPER_ADMIN = 'R_SUPER';
+    const hasPermission =
+      !routeRoles.length ||
+      authStore.userInfo.roles.includes(SUPER_ADMIN) ||
+      authStore.userInfo.roles.some(role => routeRoles.includes(role));
+
+    const strategicPatterns: Common.StrategicPattern[] = [
+      // 1. if it is login route when logged in, change to the root page
+      {
+        condition: isLogin && to.name === loginRoute,
+        callback: () => {
+          next({ name: rootRoute });
+        }
+      },
+      // 2. if is is constant route, then it is allowed to access directly
+      {
+        condition: !needLogin,
+        callback: () => {
+          next();
+        }
+      },
+      // 3. if the route need login but the user is not logged in, then switch to the login page
+      {
+        condition: !isLogin && needLogin,
+        callback: () => {
+          next({ name: loginRoute, query: { redirect: to.fullPath } });
+        }
+      },
+      // 4. if the user is logged in and has permission, then it is allowed to access
+      {
+        condition: isLogin && needLogin && hasPermission,
+        callback: () => {
+          next();
+        }
+      },
+      // 5. if the user is logged in but does not have permission, then switch to the 403 page
+      {
+        condition: isLogin && needLogin && !hasPermission,
+        callback: () => {
+          next({ name: noPermissionRoute });
+        }
+      }
+    ];
+
+    strategicPatterns.some(({ condition, callback }) => {
+      if (condition) {
+        callback();
+      }
+
+      return condition;
+    });
+  });
+}
+
+async function createAuthRouteGuard(
   to: RouteLocationNormalized,
-  from: RouteLocationNormalized,
+  _from: RouteLocationNormalized,
   next: NavigationGuardNext
 ) {
-  // 动态路由
-  const permission = await createDynamicRouteGuard(to, from, next);
-  if (!permission) return;
+  const notFoundRoute: RouteKey = 'not-found';
+  const isNotFoundRoute = to.name === notFoundRoute;
 
-  // 外链路由, 从新标签打开，返回上一个路由
-  if (to.meta.href) {
-    window.open(to.meta.href);
-    next({ path: from.fullPath, replace: true, query: from.query });
-    return;
+  // 1. If the route is the constant route but is not the "not-found" route, then it is allowed to access.
+  if (to.meta.constant && !isNotFoundRoute) {
+    return true;
   }
 
-  const auth = useAuthStore();
+  // 2. If the auth route is initialized but is not the "not-found" route, then it is allowed to access.
+  const routeStore = useRouteStore();
+  if (routeStore.isInitAuthRoute && !isNotFoundRoute) {
+    return true;
+  }
+
+  // 3. If the route is initialized, check whether the route exists.
+  if (routeStore.isInitAuthRoute && isNotFoundRoute) {
+    const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
+
+    if (exist) {
+      const noPermissionRoute: RouteKey = '403';
+
+      next({ name: noPermissionRoute });
+
+      return false;
+    }
+
+    return true;
+  }
+
+  // 4. If the user is not logged in, then redirect to the login page.
   const isLogin = Boolean(localStg.get('token'));
-  const permissions = to.meta.permissions || [];
-  const needLogin = Boolean(to.meta?.requiresAuth) || Boolean(permissions.length);
-  const hasPermission = !permissions.length || permissions.includes(auth.userInfo.userRole);
+  if (!isLogin) {
+    const loginRoute: RouteKey = 'login';
+    const redirect = to.fullPath;
 
-  const actions: Common.StrategyAction[] = [
-    // 已登录状态跳转登录页，跳转至首页
-    [
-      isLogin && to.name === routeName('login'),
-      () => {
-        next({ name: routeName('root') });
-      }
-    ],
-    // 不需要登录权限的页面直接通行
-    [
-      !needLogin,
-      () => {
-        next();
-      }
-    ],
-    // 未登录状态进入需要登录权限的页面
-    [
-      !isLogin && needLogin,
-      () => {
-        const redirect = to.fullPath;
-        next({ name: routeName('login'), query: { redirect } });
-      }
-    ],
-    // 登录状态进入需要登录权限的页面，有权限直接通行
-    [
-      isLogin && needLogin && hasPermission,
-      () => {
-        next();
-      }
-    ],
-    [
-      // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
-      isLogin && needLogin && !hasPermission,
-      () => {
-        next({ name: routeName('403') });
-      }
-    ]
-  ];
+    next({ name: loginRoute, query: { redirect } });
 
-  exeStrategyActions(actions);
+    return false;
+  }
+
+  // 5. init auth route
+  await routeStore.initAuthRoute();
+
+  // 6. the route is caught by the "not-found" route because the auto route is not initialized. after the auto route is initialized, redirect to the original route.
+  if (isNotFoundRoute) {
+    const rootRoute: RouteKey = 'root';
+    const path = to.redirectedFrom?.name === rootRoute ? '/' : to.fullPath;
+
+    next({ path, replace: true, query: to.query, hash: to.hash });
+
+    return false;
+  }
+
+  return true;
 }