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

Question

我有两个环境：“管理员”和“校友”。我想知道如何做到这一点，以使“管理员”用户无法访问“校友”用户的路线，反之亦然。我正在使用 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() 函数中检查用户的身份。它可能看起来像这样，具体取决于您如何将您的用户识别为管理员或校友：

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 反应。