如何防止某些用戶訪問 React 中的路由和任何子路由？

Question

防止特定用戶訪問react-router中的路線及其任何子路線的最佳方法是什么？

例如，我有一個路由/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
}

Answer 1

您需要使用自定義的 ProtectedRoute 組件，並將所需的角色傳遞給此組件，無論用戶是否可以 go 到該路由。

代碼沙盒：

https://codesandbox.io/s/so-protect-route-roles-z7j3l

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;

AuthService 就是這樣，您需要對其進行修改以滿足您的要求。

AuthService.js（您可以將角色更改為管理員，以使用它）

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

App.js（請注意，我們使用了 ProtectedRoute 組件，並將所需的角色傳遞給它）

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;

使用此設置，沒有管理員角色的用戶無法導航到管理員及其嵌套路由。

Answer 2

使用如圖所示的 Route 組件

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

如果管理員顯示組件，否則重定向到主頁。