玩转React路由,教你根据角色动态生成路由

情景再现：用户登录成功后，我已经获取到了用户的角色，并且根据角色获取到了用户的拥有的权限路由。我想在登录成功后动态的生成路由，来实现不同角色的用户,具备不同的权限，应该怎么实现？可以我考虑以下几种方式:

1. 基于角色的动态路由

这种方式是根据用户的角色动态生成不同的路由配置。在登录成功后,根据获取到的用户角色信息,动态生成对应的路由配置,然后使用这个新的路由配置重新渲染路由。

// 根据角色配置路由
const getRoutes = (role) => {
  const routes = [
    // 通用路由
    { path: '/home', component: Home },
    // ...
  ];

  // 根据角色添加特定路由
  if (role === 'admin') {
    routes.push({ path: '/admin', component: AdminPanel });
  } else if (role === 'user') {
    routes.push({ path: '/profile', component: UserProfile });
  }

  return routes;
};

// 登录成功后获取用户角色,然后重新渲染路由
const App = () => {
  const [routes, setRoutes] = useState(getInitialRoutes()); // 初始路由

  useEffect(() => {
    // 模拟登录成功后获取用户角色
    const userRole = getUserRole();
    const newRoutes = getRoutes(userRole);
    setRoutes(newRoutes);
  }, []);

  return (
    <Router>
      <Switch>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} component={route.component} />
        ))}
      </Switch>
    </Router>
  );
};

2. 使用React Context

你也可以使用React Context来管理路由状态,在登录成功后,更新Context中的路由状态,触发重新渲染路由。

import React, { createContext, useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const RouteContext = createContext();

const App = () => {
  const [routes, setRoutes] = useState(getInitialRoutes()); // 初始路由

  useEffect(() => {
    // 模拟登录成功后获取用户角色
    const userRole = getUserRole();
    const newRoutes = getRoutes(userRole);
    setRoutes(newRoutes);
  }, []);

  return (
    <Router>
      <RouteContext.Provider value={routes}>
        <RenderRoutes />
      </RouteContext.Provider>
    </Router>
  );
};

const RenderRoutes = () => (
  <RouteContext.Consumer>
    {(routes) => (
      <Switch>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} component={route.component} />
        ))}
      </Switch>
    )}
  </RouteContext.Consumer>
);

3. 使用高阶组件(HOC)

你可以创建一个路由高阶组件,在这个高阶组件中处理登录成功后的路由重新生成逻辑。当登录成功后,重新渲染使用了这个高阶组件包裹的路由组件。

import React from 'react';
import { Route } from 'react-router-dom';

const withRouteFilter = (WrappedComponent) => {
  const RouteFilterComponent = (props) => {
    // 检查登录状态和角色,获取新的路由配置
    const newRoutes = getRoutes(/*用户角色*/);

    return (
      <>
        {newRoutes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            render={(routeProps) => <route.component {...routeProps} {...props} />}
          />
        ))}
        <WrappedComponent {...props} />
      </>
    );
  };

  return RouteFilterComponent;
};

// 使用
const AppRoutes = withRouteFilter(App);

以上是三种在登录成功后重新生成路由的方式。你可以根据自己的需求和项目结构选择合适的方式。需要注意的是,重新生成路由会导致当前路由的卸载和新路由的加载,如果有一些组件状态需要保留,你可能需要进行额外的处理。