Wenn der Benutzer nicht eingeloggt ist, leiten Sie ihn zur Anmeldung weiter. Reactjs

Question

Meine App wie folgt aussieht:

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

Wenn der Benutzer eine Seite unter/Spiel besucht und ist nicht angemeldet, ich möchte, dass sie auf die Login- Seite umleiten.

Wie geht es in allen Routern elegant?

Answer 1

Siehe diese Antwort https://stackoverflow.com/a/43171515/208079. Vielleicht kann jemand mit mehr Ruf als ich dies als ein Duplikat markieren.

Die Grundidee besteht darin, Routen zu umbrechen, die eine Authentifizierung mit einer benutzerdefinierten Komponente erfordern (im folgenden Beispiel PrivateRoute). PrivateRoute wird einige Logik verwenden, um festzustellen, ob der Benutzer authentifiziert ist, und dann entweder; Erlauben Sie der angeforderten Route, zu rendern oder auf die Anmeldeseite umzuleiten.

Dies wird auch in den React-Router-Schulungsunterlagen unter diesem Link https://reacttraining.com/react-router/web/example/auth-workflow beschrieben.

Hier ist eine Implementierung mit den oben genannten als Inspiration.

In App.js (oder wo Ihr Routing geschieht)

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> 

Und die PrivateRoute Komponente

// 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