refactor(projects): refactor router guard. fix #655 (#667)

src/router/guard/route.ts

@@ -36,54 +36,34 @@ export function createRouteGuard(router: Router) {
     const routeRoles = to.meta.roles || [];
 
     const hasRole = authStore.userInfo.roles.some(role => routeRoles.includes(role));
-
     const hasAuth = authStore.isStaticSuper || !routeRoles.length || hasRole;
 
-    const routeSwitches: CommonType.StrategicPattern[] = [
     // if it is login route when logged in, then switch to the root page
-      {
-        condition: isLogin && to.name === loginRoute,
-        callback: () => {
+    if (to.name === loginRoute && isLogin) {
       next({ name: rootRoute });
+      return;
     }
-      },
-      // if it is constant route, then it is allowed to access directly
-      {
-        condition: !needLogin,
-        callback: () => {
+
+    // if the route does not need login, then it is allowed to access directly
+    if (!needLogin) {
       handleRouteSwitch(to, from, next);
+      return;
     }
-      },
-      // if the route need login but the user is not logged in, then switch to the login page
-      {
-        condition: !isLogin && needLogin,
-        callback: () => {
+
+    // the route need login but the user is not logged in, then switch to the login page
+    if (!isLogin) {
       next({ name: loginRoute, query: { redirect: to.fullPath } });
+      return;
     }
-      },
-      // if the user is logged in and has authorization, then it is allowed to access
-      {
-        condition: isLogin && needLogin && hasAuth,
-        callback: () => {
-          handleRouteSwitch(to, from, next);
-        }
-      },
+
     // if the user is logged in but does not have authorization, then switch to the 403 page
-      {
-        condition: isLogin && needLogin && !hasAuth,
-        callback: () => {
+    if (!hasAuth) {
       next({ name: noAuthorizationRoute });
-        }
-      }
-    ];
-
-    routeSwitches.some(({ condition, callback }) => {
-      if (condition) {
-        callback();
+      return;
     }
 
-      return condition;
-    });
+    // switch route normally
+    handleRouteSwitch(to, from, next);
   });
 }
 
@@ -93,7 +73,6 @@ export function createRouteGuard(router: Router) {
  * @param to to route
  */
 async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw | null> {
-  const authStore = useAuthStore();
   const routeStore = useRouteStore();
 
   const notFoundRoute: RouteKey = 'not-found';
@@ -105,9 +84,7 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
 
     // the route is captured by the "not-found" route because the constant route is not initialized
     // after the constant route is initialized, redirect to the original route
-    if (isNotFoundRoute) {
     const path = to.fullPath;
-
     const location: RouteLocationRaw = {
       path,
       replace: true,
@@ -117,38 +94,18 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
 
     return location;
   }
-  }
 
-  // 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 null;
-  }
-
-  // the auth route is initialized
-  // it is not the "not-found" route, then it is allowed to access
-  if (routeStore.isInitAuthRoute && !isNotFoundRoute) {
-    return null;
-  }
-  // it is captured by the "not-found" route, then check whether the route exists
-  if (routeStore.isInitAuthRoute && isNotFoundRoute) {
-    const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
-    const noPermissionRoute: RouteKey = '403';
-
-    if (exist) {
-      const location: RouteLocationRaw = {
-        name: noPermissionRoute
-      };
-
-      return location;
-    }
-
-    return null;
-  }
-
-  // if the auth route is not initialized, then initialize the auth route
   const isLogin = Boolean(localStg.get('token'));
-  // initialize the auth route requires the user to be logged in, if not, redirect to the login page
+
   if (!isLogin) {
+    // if the user is not logged in and the route is a constant route but not the "not-found" route, then it is allowed to access.
+    if (to.meta.constant && !isNotFoundRoute) {
+      routeStore.onRouteSwitchWhenNotLoggedIn();
+
+      return null;
+    }
+
+    // if the user is not logged in, then switch to the login page
     const loginRoute: RouteKey = 'login';
     const query = getRouteQueryOfLoginRoute(to, routeStore.routeHome);
 
@@ -160,8 +117,7 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
     return location;
   }
 
-  await authStore.initUserInfo();
-
+  if (!routeStore.isInitAuthRoute) {
     // initialize the auth route
     await routeStore.initAuthRoute();
 
@@ -180,6 +136,27 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
 
       return location;
     }
+  }
+
+  // the auth route is initialized
+  // it is not the "not-found" route, then it is allowed to access
+  if (!isNotFoundRoute) {
+    routeStore.onRouteSwitchWhenLoggedIn();
+
+    return null;
+  }
+
+  // it is captured by the "not-found" route, then check whether the route exists
+  const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
+  const noPermissionRoute: RouteKey = '403';
+
+  if (exist) {
+    const location: RouteLocationRaw = {
+      name: noPermissionRoute
+    };
+
+    return location;
+  }
 
   return null;
 }

src/store/modules/route/index.ts

@@ -310,6 +310,14 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
   }
 
+  async function onRouteSwitchWhenLoggedIn() {
+    authStore.initUserInfo();
+  }
+
+  async function onRouteSwitchWhenNotLoggedIn() {
+    // some global init logic if it does not need to be logged in
+  }
+
   return {
     resetStore,
     routeHome,
@@ -326,6 +334,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     isInitAuthRoute,
     setIsInitAuthRoute,
     getIsAuthRouteExist,
-    getSelectedMenuKeyPath
+    getSelectedMenuKeyPath,
+    onRouteSwitchWhenLoggedIn,
+    onRouteSwitchWhenNotLoggedIn
   };
 });