阻止用户访问其他路由 - ReactJS - React-Router -

Posted 2023-02-21

【中文标题】阻止用户访问其他路由 - ReactJS - React-Router -

【英文标题】：Prevent an user from accessing other routes - ReactJS - React-Router -

【发布时间】：2017-10-08 09:57:57

【问题描述】：

我有两个环境：“管理员”和“校友”。我想知道如何做到这一点，以使“管理员”用户无法访问“校友”用户的路线，反之亦然。我正在使用 React-Router 2.4.0。用这项技术可以做到吗？我是 ReactJS 的新手（我使用的是 15.4.2 版）。

另一个问题：更新到新版本并转译我所有的路线是否方便？

这是我的路线：

        <Router history=browserHistory>
            <Route path="/" component=NotFound/>
            <Redirect from="/alumno" to="/alumno/inicio"/>
            <Redirect from="/administrador" to="/administrador/inicio"/>

            <Route path="/" component=App>

                <Route path="alumno" component=AppAlumno>
                    <Route path="inicio" component=Alumno_Inicio/>
                    <Route path="nueva_incidencia" component=Alumno_NuevaIncidencia/>
                    <Route path="mis_incidencias" component=Alumno_MisIncidencias/>
                </Route>

                <Route path="administrador" component=AppAdministrador>
                    <Route path="inicio" component=Administrador_Inicio/>
                    <Route path="nueva_incidencia" component=Administrador_NuevaIncidencia/>
                    <Route path="incidencias_recibidas" component=Administrador_IncidenciasRecibidas/>
                    <Route path="incidencias_recibidas/nuevo_informe" component=Administrador_NuevoInforme/>
                    <Route path="informes" component=Administrador_Informes/>
                    <Route path="informes/nueva_respuesta_informe" component=Administrador_NuevaRespuestaInforme/>
                </Route>
            </Route>
        </Router>

谢谢。

【参考方案1】：

所以回答你的问题：

第一个问题：

是的，使用此技术可以限制对路线的访问。有几种方法可以做到这一点，最简单的方法是在componentWillMount() 函数中检查用户的身份。它可能看起来像这样，具体取决于您如何将您的用户识别为管理员或校友：

import React from 'react';
import  browserHistory  from 'react-router';

class YourComponent extends React.Component

  componentWillMount()
    //If user is an Alumno, throw them to '/some/path'
    if(this.state.isAlumno)
      browserHistory.push('/some/path');
  

  render()
    return <YourJsx />;
  


export default YourComponent;

这样你就不需要改变你的路线了。

您还可以通过使用返回要限制访问的组件的高阶组件 (HOC) 来实现相同的功能。如果你想走 HOC 的方式，你首先需要创建一个新的组件，看起来像这样：

import React from 'react';
import browserHistory from 'react-router';

//This function receives the Component that only some user should access
function RequireAdmin(ComposedComponent)

  class Authenticated extends React.Component 

    componentWillMount()
      if(this.state.isAlumno)
        browserHistory.push('/some/path');
    

    render()
      return <ComposedComponent />;
    
  
  //Return the new Component that requires authorization
  return Authenticated;

然后，您要限制访问的路由将如下所示：

<Route path="administrador" component=RequireAdmin(AppAdministrador)>
  ...
</Route>

就个人而言，我更喜欢第二种方式。它使路由更清晰，哪些路由需要什么样的授权，并将组件与授权分开。

---

回答第二个问题：

这取决于它会有多少麻烦。我当然会推荐学习新的 API react-router v4，但我认为更新一个已经构建的项目是不值得的，特别是一个与你的路由一样多的项目。

希望这会有所帮助！ Buena suerte con 反应。

【讨论】：

非常感谢您的回答！我喜欢那个：'Buena suerte con React'（我是西班牙人）：D。但我不明白一些东西......我必须把它放在'/ some / path' 中吗？在return () ?。我在上面放置的路径是一个名为 IndexRoutes.jsx 的 .jsx（它本身就是一个组件）。如果它是来自 AJAX 查询的“校友”或“管理员”，我将收集信息。然后我将其保存在“用户类型”状态（可以是“学生”或“管理员”）。完成后...如何限制不适合的路线？

同意！我会记住这一点，我将在我的下一个项目中部署新版本的 React-Router。如果是菜鸟问题，我很抱歉，但正如我在问题中所说，我是这项技术的新手。再次感谢您提供的帮助。

可能是主页，而不是'some/path'，或者当有人想要访问他们不应该访问的路线时，您想要重定向的地方。例如，如果 Alumno 尝试访问管理员路由，则重定向到 'alumno/inicio。第一个返回应该是你在组件中已经拥有的任何东西，它不会改变。在第二个示例中，您应该在 return 语句中包含作为函数 RequireAdmin() 的参数收到的组件，这有帮助吗？

嘿，我们都是菜鸟哈哈。无需道歉。

您好！我还有一个问题，如果我的 NavBar 上有一个状态：isAdmin（NavBar 是其他组件）；我怎么能从其他组件（HOC）读取这个状态？这样，我将避免在每次路由更改时执行 AJAX，除了在我的 NavBar 组件中我已经保存了该数据。还有一个问题.. 在您的示例中，this.state.isAdmin 存储在哪里？谢谢！