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

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

基于角色的动态路由

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

// 根据角色配置路由
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>);
};

使用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>
);

使用高阶组件(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) => (<Routekey={index}path={route.path}render={(routeProps) => <route.component {...routeProps} {...props} />}/>))}<WrappedComponent {...props} /></>);};return RouteFilterComponent;
};// 使用
const AppRoutes = withRouteFilter(App);