Navigieren Sie von der Anmeldeseite zur gewünschten Seite.

Question

Nehmen wir an, ein Benutzer möchte eine Seite sehen, die eine Authentifizierung benötigt. Nach einer erfolgreichen Anmeldung möchte ich, dass der Nutzer zu der Seite weitergeleitet wird, die er/sie an erster Stelle sehen möchte.

Dies ist die Login-Komponente:

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import { connect } from 'react-redux'; 
import { loginUser } from '../actions'; 
import validator from 'validator'; 

class LoginForm extends Component { 
    renderField(field) { 
     const {meta: {touched, error}} = field; 
     const className = `form-group ${touched && error ? 'has-danger':''}`; 
     return (
     <div className={className}> 
      <label>{field.label}</label> 
      <input className="form-control" 
      type="text" 
      {...field.input} 
      /> 
      <div className="text-help"> 
      {touched ? error:''} 
      </div> 
     </div> 
    ); 
    } 

    onSubmit(values) { 
    const { history } = this.props; 
    this.props.loginUser(values, ({status, headers}) => { 
     if (status === 200) { 
     const { authorization } = headers; 
     localStorage.setItem('jwt_token', authorization); 
     history.push("/"); //HERE ???? 
     } 
    }); 
    } 

    render() { 

    if (localStorage.getItem('jwt_token')) { 
     this.props.history.push("/"); 
    } 
    const {handleSubmit} = this.props; 

    return (
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
     <Field 
      name="username" 
      label="Username" 
      component={this.renderField} 
     /> 
     <Field 
      name="password" 
      label="Password" 
      component={this.renderField} 
     /> 
     <button type="submit" className="btn btn-primary">Enter</button> 
     </form> 
    ); 
    } 
} 

function validate(values) { 
    //..... 
} 

export default reduxForm({ 
    validate, 
    form:'LoginForm' 
})(
    connect(null, { loginUser })(LoginForm) 
); 

ich history.goBack() versucht, aber anscheinend ist es nicht umleiten zu dem Pfad Benutzer, bevor sie auf die Anmeldeseite zugreifen wollten. Was soll ich machen ?

Answer 1

Ich denke, deine Logik ist falsch!

1. Sie sollten von react life cycles verwenden und eine Anfrage an Backend senden, wenn Sie die Benutzerinformationen erhalten Sie indizieren Route umleiten.
2. Sie sollten Benutzer von withRouter Zugriff auf history.push() Methode.

import { withRouter } from 'react-router-dom'; import axios from 'axios';

@withRouter 

class LoginForm extends Component { 

** DidMount because it's client side and you reading the token from window ojbect ** 
    componentDidMount() { 
    I don't know you use which library to handle request... 
    const token = localStorage.getItem('jwt_token'); 
    if (token) { 
     axios.get('/user/profile', { 
     header: { 
      token 
     } 
     }) 
    .then((response) => { 
     this.props.history.push('/'); 
    }) 
    .catch((error) => { 
     // 401 Unauthorized 
    }); 
    } 
    } 

}