webentwicklung-frage-antwort-db.com.de

Einfaches bedingtes Routing in Reactjs

Wie mache ich ein bedingtes Routing, wenn und nur wenn einige Bedingungen erfüllt sind, sollte nur Routing erfolgen. Wenn und nur wenn der Benutzer die korrekten Anmeldeinformationen eingibt, sollte login erfolgreich sein und der Benutzer sollte die Begrüßungsseite sehen können.

wenn wir direkt auf eine URL wie 'localhost: 8080/welcome' klicken, die nicht zur Startseite geleitet werden soll, wird die Willkommensseite erst nach dem Login angezeigt. wie kann ich das erreichen, kann mir jemand bitte helfen .. danke.

App.js

import React, { Component } from 'react';
import Header from './Header';

class App extends Component{
  render(){
   return(
     <div>
       <Header />
     </div>
   );
  }
}
export default App;

Header.js

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';

class Header extends Component{
render(){
  return(
    <div>
    <nav class="navbar navbar-default">
     <div class="container-fluid">
     <ul class="nav navbar-nav">
      <li><Link to={Login}>Login</Link></li>
      <li><Link to={Login}>SignUp</Link></li>
    </ul>
    </div>
    </nav>

    </div>
   );
 } 
}

export default Header;

AllRoutes.js

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';
import Welcome from './Welcome';

class AllRoutes extends Component{
 render(){
   return(
     <Switch> 
       <Route exact path="/login" component={Login} />
       <Route exact path="/signup" component={SignUp} />
       <Route exact path="/Welcome" component={Welcome} />
     </Switch>
   );
  }
 }
 export default AllRoutes;

Welcome.js

import React, { Component } from 'react'; 

class Welcome extends Component{
render(){
 return(
  <div>
   <h2>Welcome to MainPage..</h2>
  </div>
  );
 }
}
export default Welcome;
7
Srikanth Gowda

Um Ihre Frage beantworten zu können, müssen Sie möglicherweise wie fragen, ob die Route blockiert werden soll. Wenn Sie sich das Beispiel oben ansehen, verfügen Sie noch nicht über einen Mechanismus, der die Frage "Sollte ich diese Seite besuchen können" beantworten. Dies könnte von state, redux oder anderen Methoden zur Feststellung, ob der Benutzer angemeldet ist, kommen.

Da react-router einfach nur React ist (einer meiner Lieblingsteile !!), stehen Ihnen alle Werkzeuge zur Verfügung, die Sie mit any Teil Ihrer React-App bedingt anzeigen möchten.

Hier einige Beispiele, wie Sie dies erreichen könnten (dies ist jedoch keinesfalls erschöpfend. Seien Sie kreativ! Alles hängt von Ihren Anforderungen und den verwendeten Tools ab.)

class AllRoutes extends Component{
  render(){
    return(
      <Switch> 
        <Route exact path="/login" component={Login} />
        <Route exact path="/signup" component={SignUp} />
        { this.state.authenticated && 
          <Route exact path="/Welcome" component={Welcome} />
        }
      </Switch>
    );
  }
}

Eine meiner bevorzugten Möglichkeiten, dies zu erreichen, ist das Erstellen einer ProtectedRoute-Komponente

class ProtectedRoute extends Component {
  render() {
    const { component: Component, ...props } = this.props

    return (
      <Route 
        {...props} 
        render={props => (
          this.state.authenticated ?
            <Component {...props} /> :
            <Redirect to='/login' />
        )} 
      />
    )
  }
}

class AllRoutes extends Component {
  render() {
    return (
      <Switch>
        <Route path='/login' component={Login} />
        <ProtectedRoute path='/welcome' component={Welcome} />
      <Switch>
    )
  }
}

Ich habe zwar keine spezielle Logik für die Einstellung von state.authenticated enthalten, diese kann jedoch von irgendwoher kommen (muss aber keinesfalls von state kommen). Beantworten Sie die Frage "Wie bestimme ich, ob ein Benutzer authentifiziert ist", und verwenden Sie diesen Mechanismus als Mittel für die Routenauthentifizierung.

32
jerelmiller

Dazu müssen Sie die gesamte App in zwei Teile aufteilen, die normalerweise zugänglich und geschützt sind. Der geschützte Teil ist nur nach erfolgreichem Login verfügbar.

Um diese Funktionalität zu erreichen, erstellen Sie einen Wrapper des geschützten Teils, definieren Sie seine Routen mit path='/' und fügen Sie die Bedingung ein. Alle geschützten Routen sollten in dieser Wrapper-Komponente definiert werden. Wenn jemand versucht, auf diese Routen ohne Anmeldung zuzugreifen, leitet der Wrapper sie auf die Anmeldeseite um.

So was:

class AllRoutes extends Component{
 render(){
   return(
     <Switch> 
       <Route exact path="/login" component={Login} />
       <Route exact path="/signup" component={SignUp} />
       <Route path="/" component={AppWrapper} />
     </Switch>
   );
  }
 }

AppWrapper Komponente (vorausgesetzt, Sie verwenden einen Weg, um zu pflegen, ob der Benutzer angemeldet ist oder nicht, setzen Sie die entsprechende Check-in-Bedingung ein)

import { Redirect } from 'react-router-dom'

class AppWrapper extends Component{
  render(){

  if(/*not login*/)
    return <Redirect to="/login" />

   return(
     <div>
       App wrapper
       <Route path='/Welcome' component={Welcome} />
     </div>
   );
  }
}
3
Mayank Shukla

Am besten erstellen Sie ein HOC. Bedenken Sie, dass Sie den Auth-Status in Ihrem Redux-Store beibehalten. Oder Sie können mit Ihrer eigenen Variable überprüfen.

Erstellen Sie requirAuth.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function(ComposedComponent) {
  class Authentication extends Component {
    static contextTypes = {
      router: React.PropTypes.object
    }

    componentWillMount() {
      if (!this.props.authenticated) {
        this.context.router.Push('/');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.Push('/');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

Nun können Sie in den Routen diese Route verwenden und die Komponente übergeben.

import RequireAuth from './requireAuth';
...

<Route exact path="/Welcome" component={RequireAuth(Welcome)} />
0
Shrey Kejriwal

Sie können so etwas tun:

 let redirectToUrl;
      if ( not logged in ) //check condition
      {
        redirectToUrl = <Redirect to={loginPage}/>;
      }

und benutze das gleiche:

  <Router>
     <div>
      {redirectToUrl}
       <Switch>
       <Route />
        </switch>
       </div>
</Router>

Für das gleiche müssen Sie aus dem reakt-router-dom importieren:

import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Redirect,
  Link,
  Switch
} from "react-router-dom";
0
learner

Sie können Redirect aus react-router-dom verwenden.

Hier ist ein gutes Beispiel - https://scotch.io/courses/using-react-router-4/authentication-with-redirect

0