web-dev-qa-db-fra.com

Lorsque l'utilisateur n'est pas connecté, redirige vers la connexion. Reactjs

Mon application ressemble à:

class App extends Component {
  render() {
    <Router>
      <div>
      <Route exact path='/login' component={Login} />
      <Route exact path='/game' component={GameContainer} />
      <Route exact path='/chat' component={ChatContainer} />
      <Route exact path='/info' component={InfoContainer} />
    </div>
    </Router>  
  }

Si l'utilisateur visite une page sous/jeu et n'est pas connecté, je souhaite les rediriger vers la page de connexion.

Comment le faire de manière élégante dans tous les routeurs?

reactjsauthenticationredirectecmascript-6routes
26
Ivan Hreskiv

Voir cette réponse https://stackoverflow.com/a/43171515/208079 . Peut-être que quelqu'un avec plus de représentants que moi peut marquer ceci comme un doublon.

L'idée de base est d'encapsuler les itinéraires nécessitant une authentification avec un composant personnalisé (PrivateRoute dans l'exemple ci-dessous). PrivateRoute utilisera une certaine logique pour déterminer si l'utilisateur est authentifié, puis l'une ou l'autre; autoriser le rendu de l'itinéraire demandé ou le rediriger vers la page de connexion.

Ceci est également décrit dans les documents de formation de react-router sur ce lien https://reacttraining.com/react-router/web/example/auth-workflow .

Voici une implémentation utilisant ce qui précède comme inspiration.

Dans App.js (ou l'emplacement de votre routage)

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import PrivateRoute from './PrivateRoute'
import MyComponent from '../src/MyComponent'
import MyLoginForm from '../src/MyLoginForm'

<Router>
  <Route path="/login" component={MyLoginForm} />
  <PrivateRoute path="/onlyAuthorizedAllowedHere/" component={MyComponent} />
</Router>

Et le composant PrivateRoute

// This is used to determine if a user is authenticated and
// if they are allowed to visit the page they navigated to.

// If they are: they proceed to the page
// If not: they are redirected to the login page.
import React from 'react'
import AuthService from './Services/AuthService'
import { Redirect, Route } from 'react-router-dom'

const PrivateRoute = ({ component: Component, ...rest }) => {

  // Add your own authentication on the below line.
  const isLoggedIn = AuthService.isLoggedIn()

  return (
    <Route
      {...rest}
      render={props =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  )
}

export default PrivateRoute
54
bluesixty