Javascript 如何防止某些用户访问React中的路由和任何子例程？

在

react router

中，防止特定用户访问路由及其任何子例程的最佳方法是什么

e、 g.我有一个路由

/admin/

，它还有许多其他子例程，如

/admin/create user

，

/admin/settings

，等等

是否有另一种方法可以防止用户访问这些路由，而不在每个组件上指示类似的情况

if (user.role.name !== "Admin") {
    return (
      <div className="error-page">
        <h1>Sorry, you don't have rights to access this page.</h1>
     </div>
    );
  } else {
  // render admin component
}

if（user.role.name！=“Admin”）{
返回(
很抱歉，您没有访问此页面的权限。
);
}否则{
//呈现管理组件
}

使用路线组件，如图所示

if(user.role.name !== "Admin") {
   <Route path="/admin" component={Admin} />
} else {
   <Redirect to="/" />
}

if（user.role.name！=“Admin”）{
}否则{
}

---

如果管理员显示组件，则重定向到主页。

您需要使用自定义ProtectedRoute组件，并将所需角色传递给该组件，无论用户是否可以转到该路由

代码沙盒：

ProtectedRoute.js：

import React from "react";
import { Route, Redirect } from "react-router-dom";
import {user} from "./AuthService";

export const ProtectedRoute = ({
  path,
  component: Component,
  render,
  requiredRole,
  ...rest
}) => {

  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        if (user.role.name === requiredRole) {
          return Component ? <Component {...props} /> : render(props);
        } else {
          return <Redirect to="/error" />;
        }
      }}
    />
  );
};

export default ProtectedRoute;

App.js（请注意，我们正在使用out ProtectedRoute组件，并将所需角色传递给它）

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Link，Route}；
从“/Home”导入主页；
从“/User”导入用户；
从“/Admin”导入管理员；
从“/Login”导入登录名；
从“/ErrorPage”导入ErrorPage；
从“/ProtectedRoute”导入ProtectedRoute；
类应用程序扩展组件{
render（）{
返回(


家


使用者


管理


);
}
}
导出默认应用程序；

使用此设置，没有管理员角色的用户无法导航到管理员及其嵌套路由

export const user = {
  name: "User 1",
  role:{
    name: "User"
  }
}

import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
import Home from "./Home";
import User from "./User";
import Admin from "./Admin";
import Login from "./Login";
import ErrorPage from "./ErrorPage";
import ProtectedRoute from "./ProtectedRoute";

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/user">User</Link>
            </li>
            <li>
              <Link to="/admin">Admin</Link>
            </li>
          </ul>

          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/error" component={ErrorPage} />
          <ProtectedRoute path="/user" component={User} requiredRole="User" />
          <ProtectedRoute path="/admin" component={Admin} requiredRole="Admin" />
        </div>
      </Router>
    );
  }
}

export default App;