如何防止某些用户访问React中的路由和任何子路由? [英] How to prevent certain users from accessing a route and any subroutes in React?

问题描述

阻止特定用户访问 react-router 中的路由及其子路由的最佳方法是什么?

例如我有一条路由/admin/，它还有许多其他子路由，例如/admin/create-user ，/admin/settings 等./p>

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

  if(user.role.name！=="Admin"){返回 (< div className =错误页面">< h1>很抱歉，您无权访问此页面.</div>);} 别的 {//渲染管理组件} 

解决方案

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

代码和框:

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

ProtectedRoute.js:

  import从反应"中反应；从"react-router-dom"导入{Route，Redirect}；从"./AuthService"导入{user}；导出const ProtectedRoute =({小路，组件:组件，使成为，requiredRole，...休息})=>{返回 (<路线路径= {路径}{...休息}render = {props =>{如果(user.role.name === requiredRole){返回组件?<组件{... props}/>:render(props);} 别的 {返回<重定向到="/error"/> ;;}}}/>);};导出默认的ProtectedRoute; 

AuthService就是这样，您需要对其进行修改以符合您的要求.

AuthService.js(您可以将角色更改为Admin，以使用它)

  export const user = {名称:用户1"，角色:{名称:用户"}} 

App.js(请注意，我们正在使用ProtectedRoute组件，并将必需的角色传递给它)

  import React，{组件}来自"react"；从"react-router-dom"导入{BrowserRouter作为路由器，链接，路由}；从"./Home"导入Home；从"./User"导入用户；从"./Admin"导入管理员；从"./Login"导入登录名；从"./ErrorPage"导入ErrorPage；从"./ProtectedRoute"导入ProtectedRoute；App类扩展了组件{使成为() {返回 (<路由器>< div>< ul>< li><链接到="/">首页</Link></li>< li><链接到="/user">用户</Link></li>< li><链接到="/admin"> Admin</Link></li></ul><路由精确路径="/" component = {Home}/><路由精确路径="/login"组件= {登录}/><路由精确路径="/error" component = {ErrorPage}/>< ProtectedRoute path ="/user" component = {User} requiredRole ="User"/>< ProtectedRoute path ="/admin" component = {Admin} requiredRole ="Admin"/></div></路由器>);}}导出默认应用程序； 

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

What's the best way to prevent a particular user from accessing a route and any of its subroutes in react-router?

e.g. I have a route /admin/ and it has many other subroutes like /admin/create-user, /admin/settings, etc.

Is there another way of preventing users from accessing these routes without indicating on each component some condition like so?

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
}

解决方案

You need to use a custom ProtectedRoute component, and pass the required role to this whether the user can go to that route or not.

Codesandbox:

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;

The AuthService is simply like this, you need to modify it to fit your requirements.

AuthService.js (you can change the role to Admin, to play with it)

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

App.js (Please note that we are using out ProtectedRoute component, and passing the required role to it)

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;

With this setup, a user without Admin role cannot navigate to Admin and it's nested routes.

这篇关于如何防止某些用户访问React中的路由和任何子路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！