Heim > Web-Frontend > js-Tutorial > Wie verwalte ich die Authentifizierung in React Router 4?

Wie verwalte ich die Authentifizierung in React Router 4?

Patricia Arquette
Freigeben: 2024-10-22 23:08:29
Original
412 Leute haben es durchsucht

How to Manage Authentication in React Router 4?

Authentifizierung in React Router 4 verwalten

In React Router Version 4 erfordert die Implementierung authentifizierter Routen einen anderen Ansatz als in früheren Versionen.

Ursprünglicher Ansatz

Früher konnten Sie mehrere Routenkomponenten mit Kindern verwenden, aber davon wird jetzt abgeraten.

<Route exact path="/&quot; component={Index} />
<Route path="/auth" component={UnauthenticatedWrapper}>
    <Route path="/auth/login" component={LoginBotBot} />
</Route>
<Route path="/domains" component={AuthenticatedWrapper}>
    <Route exact path="/domains" component={DomainsIndex} />
</Route>
Nach dem Login kopieren

Richtig Implementierung

Um authentifizierte Routen zu implementieren, besteht eine Möglichkeit darin, eine benutzerdefinierte Komponente zu verwenden, die Route erweitert und vor dem Rendern der Komponente auf Authentifizierung prüft.

import React, {PropTypes} from "react";
import {Route} from "react-router-dom";

export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin()
      return null
    }
    return <Route {...this.props} />
  }
}

AuthenticatedRoute.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired,
  component: PropTypes.element,
  redirectToLogin: PropTypes.func.isRequired
}
Nach dem Login kopieren

Alternativer Ansatz

Ein anderer Ansatz ist die Verwendung der Redirect-Komponente, mit der Sie Benutzer basierend auf einer authentifizierten Eigenschaft umleiten können.

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}
Nach dem Login kopieren

Sie können dann die PrivateRoute-Komponente in Ihren Routen verwenden:

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie verwalte ich die Authentifizierung in React Router 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage