ログインページから目的のページに移動

Question

認証が必要なページをユーザーが見たいとしましょう。ログインに成功した後は、最初に見たいページにリダイレクトされるようにします。

これは、ログインコンポーネントです：

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) 
); 

私はhistory.goBack()を試みたが、どうやらそれは、ユーザーがログインページに入る前にアクセスしたかったパスにリダイレクトされません。私は何をすべきか ？

Answer 1

あなたのロジックは間違っていると思います！

1. あなたはreact life cyclesから使用して、あなたは、インデックスのルートにリダイレクトすることができ、ユーザ情報を取得する場合 バックエンドにリクエストを送信する必要があります。
2. の方法にアクセスするには、withRouterからのユーザーである必要があります。

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

}