react 实现权限角色路由

在React中实现权限角色路由可以通过以下步骤来完成：

1. 首先，你需要定义一个权限配置文件，该文件包含了每个路由对应的权限信息。例如，你可以创建一个名为`routes.js`的文件，并在其中定义路由和权限的映射关系。

2. 在你的应用程序的根组件中，你需要使用React Router来设置路由。你可以使用`<Route>`组件来定义每个路由，并使用`<Switch>`组件来确保只有一个路由被渲染。

3. 在每个路由组件中，你可以使用`hasPermission`函数来检查当前用户是否有权限访问该路由。如果用户有权限，你可以渲染对应的组件；如果用户没有权限，你可以渲染一个提示组件。

下面是一个示例代码，演示了如何在React中实现权限角色路由：

// routes.js
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    auth: ['admin', 'user'] // 只有admin和user角色可以访问
  },
  {
    path: '/profile',
    component: Profile,
    auth: ['admin', 'user'] // 只有admin和user角色可以访问
  },
  {
    path: '/settings',
    component: Settings,
    auth: ['admin'] // 只有admin角色可以访问
  },
  {
    path: '/login',
    component: Login,
    auth: [] // 不需要权限就能访问
  }
];

// App.js
import { Route, Switch, Redirect } from 'react-router-dom';

const hasPermission = (auth, userRoles) => {
  if (auth.length === 0) {
    return true; // 不需要权限就能访问
  }
  return userRoles.some(role => auth.includes(role)); // 检查用户角色是否包含在权限列表中
};

const App = () => {
  const userRoles = ['admin']; // 当前用户的角色

  return (
    <Switch>
      {routes.map(route => (
        <Route
          key={route.path}
          path={route.path}
          render={() =>
            hasPermission(route.auth, userRoles) ? (
              <route.component />
            ) : (
              <UnauthorizedComponent />
            )
          }
        />
      ))}
      <Redirect to="/login" /> // 默认重定向到登录页面
    </Switch>
  );
};

这样，当用户访问某个路由时，系统会根据用户的角色和路由的权限配置来判断是否有权限访问。如果有权限，会渲染对应的组件；如果没有权限，会渲染一个未授权的提示组件。