Node.js React JWT登录

Question

It's ok, I got my Token on Node.js, I tested with Postman. But I want to recuperate my Token in React with localStorage. I don't understand why, but it doesn't work. Browser toolbox says "TypeError: this is undefined".

When I try with "bind", browser say nothing. No error but my localStorage is empty. For the second case, PreventDefault() doesn't work, i replaced it by persist().

Login.js

class Login extends Component {

  state = {
    email:"",
    password:"",
  }

async postLogin(e){

  await this.setState({
    [e.target.name]: e.target.value
  })

    e.preventDefault(e);
    const login = {
        email:this.state.email,
        password:this.state.password
    };

  await axios.post("http://localhost:7777/api/users/login", login)
        .then((response) => {
            const {token} = response.data;
            localStorage.setItem("token", token)
            this.props.history.push("/articles")
        })

        .catch((error) => {
            console.log(error);
        })
}


  render(){

    return(
        <div className="containerSign">
          <h1>Connecte toi</h1>
          <form onSubmit={this.postLogin}>
            <input className="inputFormSign" type="email" placeholder="Email"/>
            <input className="inputFormSign" type="password" placeholder="Mot de passe"/>
            <button className="btnFormSign" type="submit">Envoyer</button>
          </form>
        </div>
    )
  }
}

export default Login;

Login.js with bind

postLogin = this.postLogin.bind(this);

async postLogin(e){

  await this.setState({
    [e.target.name]: e.target.value
  })

    e.persist(e);
    const login = {
        email:this.state.email,
        password:this.state.password
    };

  await axios.post("http://localhost:7777/api/users/login", login)
        .then((response) => {
            const {token} = response.data;
            localStorage.setItem("token", token)
            this.props.history.push("/articles")
        })

        .catch((error) => {
            console.log(error);
        })
}


  render(){

    return(
        <div className="containerSign">
          <h1>Connecte toi</h1>
          <form onSubmit={this.postLogin}>
            <input className="inputFormSign" type="email" placeholder="Email"/>
            <input className="inputFormSign" type="password" placeholder="Mot de passe"/>
            <button className="btnFormSign" type="submit">Envoyer</button>
          </form>
        </div>
    )
  }
}

export default Login;

Answer 1

You should use autobind decorator package to eradicate this issue!

Installation:

npm install --save autobind-decorator

Examples:

import autobind from 'autobind-decorator';

@autobind
class Component { }

// or

@autobind
method() {
  return this.value
}

note:

To use ES7 decorators you must install babel-plugin-transform-decorators

Answer 2

You must bind the method , for example using class property :

async postLogin = (e) => {
  ...
}