如何让Fuse React角色授权系统的默认角色数组动态化？

1. 拆分路由配置，分离静态与动态部分 #

修改原路由配置文件，只导出路由模板集合和无需权限的基础路由，不再提前生成完整路由：

// routes/config.js
export const routeConfigs = [
  // 这里存放原本的各路由配置项，如dashboard、业务页面等
];

export const baseRoutes = [
  {
    path: '/',
    exact: true,
    auth: '',
    component: () => <Redirect to="/login" />
  },
  {
    path: '/login',
    exact: true,
    auth: '',
    component: Login // 直接引入登录组件，确保不依赖权限拦截
  },
  {
    component: () => <Redirect to="/pages/errors/error-404" />
  }
];

2. 在App组件中动态生成路由 #

将路由生成逻辑移到App组件内部，用状态管理动态路由，在登录完成后触发生成：

import { useState, useEffect } from 'react';
import { routeConfigs, baseRoutes } from './routes/config';
import FuseUtils from '@fuse/utils';
import { useAuth } from './contexts/AuthContext'; // 假设用AuthContext管理登录状态

const App = () => {
  const [dynamicRoutes, setDynamicRoutes] = useState([]);
  const { isAuthenticated, userId } = useAuth(); // 从上下文获取登录状态、用户ID

  // 登录成功后，拉取权限并生成路由
  useEffect(() => {
    const fetchPermissionsAndGenerateRoutes = async () => {
      if (isAuthenticated && userId) {
        // 调用接口，根据用户ID获取各路由对应的权限数组
        const routePermissions = await fetch(`/api/user/${userId}/route-permissions`).then(res => res.json());
        
        // 生成带正确auth属性的动态路由
        const generatedRoutes = FuseUtils.generateRoutesFromConfigs(routeConfigs, (routeKey) => {
          // 根据路由key返回对应权限，假设接口返回格式为{ dashboard: ['admin','staff'], ... }
          return routePermissions[routeKey] || [];
        });
        
        setDynamicRoutes(generatedRoutes);
      }
    };

    fetchPermissionsAndGenerateRoutes();
  }, [isAuthenticated, userId]);

  // 合并动态路由与基础路由
  const routes = [...dynamicRoutes, ...baseRoutes];

  return (
    <AppContext.Provider value={{ routes }}>
      <StylesProvider jss={jss} generateClassName={generateClassName}>
        <Provider store={store}>
          <Auth>
            <Router history={history}>
              <FuseAuthorization>
                <FuseTheme>
                  {/* 路由生成前显示加载状态 */}
                  {!isAuthenticated || dynamicRoutes.length === 0 ? (
                    <div className="loading-wrapper">
                      <Spinner /> {/* 替换为你的加载组件 */}
                    </div>
                  ) : (
                    <FuseLayout />
                  )}
                </FuseTheme>
              </FuseAuthorization>
            </Router>
          </Auth>
        </Provider>
      </StylesProvider>
    </AppContext.Provider>
  );
};

export default App;

3. 调整FuseLayout的路由获取逻辑 #

确保FuseLayout从AppContext读取动态更新后的路由，而非静态导入：

// FuseLayout.js
import { useContext } from 'react';
import { AppContext } from '../contexts/AppContext';

const FuseLayout = () => {
  const { routes } = useContext(AppContext);
  
  // 用context中的routes渲染导航和路由匹配逻辑
  return (
    // 原FuseLayout的结构，替换静态路由为动态路由
  );
};

4. 修正登录流程与权限拦截 #

• 登录组件必须放在基础路由中，保证未登录状态下能直接访问，不被FuseAuthorization拦截。
• 确保Auth组件能正确监听登录状态，登录成功后及时更新isAuthenticated和userId到上下文或redux store。

内容的提问来源于stack exchange，提问作者Furkan YIlmaZ