javascript - component - react router private route

Autorización de React Router

Question

¿Cuáles son las mejores prácticas para la verificación de autorizaciones antes del montaje de un componente?

Yo uso react-router 1.x

Aquí están mis rutas

React.render((
  <Router history={History.createHistory()}>
    <Route path="/" component={Dashboard}></Route>
    <Route path="/login" component={LoginForm}></Route>
  </Router>
), document.body);

Aquí está mi componente Tablero:

var Dashboard = React.createClass({
  componentWillMount: function () {
    // I want to check authorization here
    // If the user is not authorized they should be redirected to the login page.
    // What is the right way to perform this check?
  },

  render: function () {
    return (
      <h1>Welcome</h1>
    );
  }
});

Answer 1

Con react-router 4 tiene acceso a los accesorios de ruta dentro del componente. Para redirigir a un usuario, solo tiene que insertar la nueva URL en el historial. En su ejemplo, el código sería:

var Dashboard = React.createClass({
  componentWillMount: function () {
    const history = this.props.history; // you''ll have this available
    // You have your user information, probably from the state
    // We let the user in only if the role is ''admin''
    if (user.role !== ''admin'') {
      history.push(''/''); // redirects the user to ''/''
    }
  },

  render: function () {
    return (
      <h1>Welcome</h1>
    );
  }
});

En los documentos, muestran otra forma de hacerlo , mediante el uso de la propiedad de render , en lugar del component . Definen un PrivateRoute , que hace que el código sea muy explícito cuando define todas sus rutas.

Answer 2

Si desea aplicar la autorización en varios componentes, puede hacerlo así.

<Route onEnter={requireAuth} component={Header}>
    <Route path=''dashboard'' component={Dashboard} />
    <Route path=''events'' component={Events} />
</Route>

Para un solo componente puedes hacer

<Route onEnter={requireAuth} component={Header}/>

function requireAuth(nextState, replaceState) {
  if (token || or your any condition to pass login test)
  replaceState({ nextPathname: nextState.location.pathname }, 
  ''/login'')
}

Answer 3

Solución actualizada para React router v4

<Route 
  path="/some-path" 
  render={() => !isAuthenticated ?
    <Login/> :
    <Redirect to="/some-path" />
}/>

Reaccionar enrutador hasta v3

Utilice el evento ''onEnter'' y en la verificación de devolución de llamada si el usuario está autorizado:

<Route path="/" component={App} onEnter={someAuthCheck}>  

const someAuthCheck = (nextState, transition) => { ... }