feat: 聚合router相关的

Author: Ohh-889

src/features/router/index.ts

@@ -2,8 +2,12 @@ export * from './router';
 
 export * from './router-context';
 
+export * from './routerHooks';
+
 export * from './RouterProvider';
 
+export * from './routeStore';
+
 export * from './useRoute';
 
 export * from './useRouter';

src/features/router/routeStore.ts

@@ -0,0 +1,44 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+import { createAppSlice } from '../../store/createAppSlice';
+
+interface InitialStateType {
+  cacheRoutes: string[];
+  removeCacheKey: string | null;
+  routeHomePath: string;
+}
+
+const initialState: InitialStateType = {
+  /** - 需要进行缓存的页面 */
+  cacheRoutes: [],
+  /** - 需要删除的缓存页面 */
+  removeCacheKey: null,
+  /** - 首页路由 */
+  routeHomePath: import.meta.env.VITE_ROUTE_HOME
+};
+
+export const routeSlice = createAppSlice({
+  initialState,
+  name: 'route',
+  reducers: create => ({
+    addCacheRoutes: create.reducer((state, { payload }: PayloadAction<string>) => {
+      state.cacheRoutes.push(payload);
+    }),
+    resetRouteStore: create.reducer(() => initialState),
+    setCacheRoutes: create.reducer((state, { payload }: PayloadAction<string[]>) => {
+      state.cacheRoutes = payload;
+    }),
+    setRemoveCacheKey: create.reducer((state, { payload }: PayloadAction<string | null>) => {
+      state.removeCacheKey = payload;
+    })
+  }),
+  selectors: {
+    selectCacheRoutes: route => route.cacheRoutes,
+    selectRemoveCacheKey: route => route.removeCacheKey,
+    selectRouteHomePath: route => route.routeHomePath
+  }
+});
+
+export const { addCacheRoutes, resetRouteStore, setCacheRoutes, setRemoveCacheKey } = routeSlice.actions;
+
+export const { selectCacheRoutes, selectRemoveCacheKey, selectRouteHomePath } = routeSlice.selectors;

src/features/router/router.ts

@@ -1,9 +1,12 @@
-import type { RouterNavigateOptions, To } from 'react-router-dom';
+import type { RouteObject, RouterNavigateOptions, To } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router-dom';
 
-import { router as reactRouter } from '@/router';
+import { routes } from '@/router';
 
 export function navigator() {
- async function navigate(path: To | null, options?: RouterNavigateOptions) {
+  const reactRouter = createBrowserRouter(routes, { basename: import.meta.env.VITE_BASE_URL });
+
+  async function navigate(path: To | null, options?: RouterNavigateOptions) {
     reactRouter.navigate(path, options);
   }
 
@@ -35,7 +38,12 @@ export function navigator() {
     reactRouter.navigate('/');
   }
 
+  function addRoutes(newRoutes: RouteObject[], parent: string | null = null) {
+    reactRouter.patchRoutes(parent, newRoutes);
+  }
+
   return {
+    addRoutes,
     back,
     forward,
     go,

src/features/router/routerHooks.ts

@@ -1,38 +1,45 @@
-import type { RouteObject } from 'react-router';
-
-import { routes as allRoutes } from '@/router';
-import { setCacheRoutes } from '@/store/slice/route';
-
-function filterCacheRoutes(routes: RouteObject[]) {
-  const cacheRoutes: string[] = [];
-
-  for (const route of routes) {
-    const { children, handle, path } = route;
-    // 如果节点存在 path（注意：这里假设空字符串或 undefined 均视为无 path）
-    if (path) {
-      if (handle?.keepAlive) {
-        cacheRoutes.push(path);
-      }
-
-      if (children && children.length) {
-        cacheRoutes.push(...filterCacheRoutes(children));
+import { emitter } from '@sa/hooks';
+
+import { authRoutes } from '@/router';
+
+import type { RouterContextType } from './router';
+import { filterAuthRoutesByRoles, mergeValuesByParent } from './shared';
+
+export function useInitAuthRoutes() {
+  const authRouteMode = import.meta.env.VITE_AUTH_ROUTE_MODE;
+
+  const reactAuthRoutes = mergeValuesByParent(authRoutes).reverse();
+
+  function initAuthRoutes(isStaticSuper: boolean, roles: string[], addRoutes: RouterContextType['addRoutes']) {
+    // 静态模式
+    if (authRouteMode === 'static') {
+      // 超级管理员
+      if (isStaticSuper) {
+        reactAuthRoutes.forEach(route => {
+          emitter.emit('ADD_MENUS', route.route);
+          addRoutes(route.route, route.parent);
+        });
+      } else {
+        // 非超级管理员
+        const filteredRoutes = filterAuthRoutesByRoles(reactAuthRoutes, roles);
+        filteredRoutes.forEach((route, index) => {
+          emitter.emit('ADD_MENUS', route);
+          addRoutes(route, reactAuthRoutes[index].parent);
+        });
       }
-    } else if (children && children.length) {
-      // 如果当前节点没有 path，但有 children，则递归处理 children，
-      cacheRoutes.push(...filterCacheRoutes(children));
-      // 如果既没有 path 也没有 children，则该节点直接被过滤掉
+    } else {
+      // 动态模式
+      // await dispatch(initDynamicAuthRoute());
     }
-  }
 
-  return cacheRoutes;
-}
+    // const routeHomeName = getRouteHome(getState());
 
-export function useCacheRoutes() {
-  const dispatch = useAppDispatch();
+    // const homeRoute = router.getRouteByName(routeHomeName);
 
-  const cacheRoutes = filterCacheRoutes(allRoutes);
+    // if (homeRoute) dispatch(initHomeTab({ homeRouteName: routeHomeName as LastLevelRouteKey, route: homeRoute }));
+  }
 
-  useEffect(() => {
-    dispatch(setCacheRoutes(cacheRoutes));
-  }, [cacheRoutes]);
+  return {
+    initAuthRoutes
+  };
 }

src/features/router/shared.ts

@@ -0,0 +1,87 @@
+import type { RouteObject } from 'react-router';
+
+import type { AuthRoute } from '@/router/routes';
+
+export function filterCacheRoutes(routes: RouteObject[]) {
+  const cacheRoutes: string[] = [];
+
+  for (const route of routes) {
+    const { children, handle, path } = route;
+    // 如果节点存在 path（注意：这里假设空字符串或 undefined 均视为无 path）
+    if (path) {
+      if (handle?.keepAlive) {
+        cacheRoutes.push(path);
+      }
+
+      if (children && children.length) {
+        cacheRoutes.push(...filterCacheRoutes(children));
+      }
+    } else if (children && children.length) {
+      // 如果当前节点没有 path，但有 children，则递归处理 children，
+      cacheRoutes.push(...filterCacheRoutes(children));
+      // 如果既没有 path 也没有 children，则该节点直接被过滤掉
+    }
+  }
+
+  return cacheRoutes;
+}
+
+/**
+ * Merge routes by parent
+ *
+ * @param data Auth routes
+ * @returns Merged routes
+ */
+export function mergeValuesByParent(data: AuthRoute[]) {
+  const merged: Record<string, { parent: string | null; route: RouteObject[] }> = {};
+  data.forEach(item => {
+    // 使用一个变量作为 key，若 parent 为 null，则转换为字符串 "null"
+    const key = item.parent === null ? 'null' : item.parent;
+    if (!merged[key]) {
+      merged[key] = {
+        parent: item.parent, // 保持原始 parent 值，包括 null
+        route: []
+      };
+    }
+    merged[key].route.push(item.route);
+  });
+  return Object.values(merged);
+}
+
+/**
+ * Filter auth routes by roles
+ *
+ * @param routes Auth routes
+ * @param roles Roles
+ */
+export function filterAuthRoutesByRoles(routes: { parent: string | null; route: RouteObject[] }[], roles: string[]) {
+  return routes.flatMap(route => {
+    const filteredRoutes = route.route.map(item => filterAuthRouteByRoles(item, roles));
+
+    return filteredRoutes;
+  });
+}
+
+/**
+ * Filter auth route by roles
+ *
+ * @param route Auth route
+ * @param roles Roles
+ */
+function filterAuthRouteByRoles(route: RouteObject, roles: string[]) {
+  const routeRoles: string[] = (route.handle && route.handle.roles) || [];
+
+  // if the route's "roles" is empty, then it is allowed to access
+  const isEmptyRoles = !routeRoles.length;
+
+  // if the user's role is included in the route's "roles", then it is allowed to access
+  const hasPermission = routeRoles.some(role => roles.includes(role));
+
+  const filterRoute = { ...route };
+
+  if (filterRoute.children?.length) {
+    filterRoute.children = filterRoute.children.flatMap(item => filterAuthRouteByRoles(item, roles));
+  }
+
+  return hasPermission || isEmptyRoles ? [filterRoute] : [];
+}

src/features/router/useRoureStore.ts

@@ -0,0 +1,11 @@
+import { selectRouteHomePath } from './routeStore';
+
+export function useGetRouteHomePath() {
+  return useAppSelector(selectRouteHomePath);
+}
+
+export function useInitAuthRoutes() {
+  const routeHomePath = useGetRouteHomePath();
+
+  const { authRoutes } = useGetRoutes();
+}