Question

我有两种环境：＆＃39; Administrador＆＃39;和＆＃39; Alumno＆＃39;。我想知道我是如何做到这样的，以便管理员能够做到这一点。用户无法访问“Alumno”的路线。用户，反之亦然。我正在使用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>

谢谢。

Answer 1

所以回答你的问题：

对于第一个问题：

是的，使用此技术可以限制对路径的访问。有几种方法可以做到这一点，最简单的方法是在componentWillMount()函数中检查用户的身份。它可能看起来像这样，取决于您将用户标识为Administrador或Alumno的方式：

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 React。

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

1 个答案: