ユーザーが他のルートにアクセスできないようにする - ReactJS - React-Router -

Question

「Administrador」と「Alumno」の2つの環境があります。私は、「管理人」のユーザーが「同窓会」ユーザーのルートにアクセスできないように、そしてその逆も同様に行うことができるようにしたいと考えています。私はReact-Router 2.4.0を使用しています。この技術で可能ですか？私はReactJS（私はバージョン15.4.2を使用しています）には初めてです。

もう1つの質問：新しいバージョンに更新してすべてのルートをトランスペアレントにすると便利でしょうか？ここで

は私のルートです：

 <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）を使用することで、同じ機能を実現することもできます。次のようになり、その後

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; 
} 

あなたがへのアクセスを制限したいルートを：あなたはHOCの道を行くしたい場合は、まず次のようになり、新しいコンポーネントを作成する必要が

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

個人的には、私は第2の方法を好みます。ルートによってどのルートがどのような権限を必要とするかを明確にし、コンポーネントを認可から分離します。

---

2つ目の質問に答えるために：

をそれはそれがどのくらい手間のに依存します。私は確かに新しいAPIの反応ルータv4を学ぶことをお勧めしますが、私はそれがあなたのものと同じくらい多くのルートを持つ、すでに構築されたプロジェクトを更新する価値があるとは思わない。

希望すると便利です。ブエナ・シュアーテ・コン・リアクト。