如何在 React js 中生成 JWT 令牌

Question

我是 JWT 概念的新手。我有一个注册表单并登录。 Signup.js：我创建了注册表单

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
export class SignUp extends Component {
constructor() {
    super();
    this.state = {
        name: '',
        Password: '',
        confirmPassword: ''
    }
    this.name = this.name.bind(this);
    this.Password = this.Password.bind(this);
    this.confirmPassword = this.confirmPassword.bind(this);
    this.SignUp = this.SignUp.bind(this);
  }

name(event) {
    this.setState({ Email: event.target.value })
}

Password(event) {
    this.setState({ Password: event.target.value })
}

confirmPassword(event) {
    this.setState({ confirmPassword: event.target.value })
}
SignUp(event) {
     fetch(' api/sign_up', {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',      
        },

        body: JSON.stringify({
            Password: this.state.Password,
            name: this.state.name,
        })

    }).then((Response) => Response.json())
            .then((Result) => {
            if (Result.Status === 'Success')
               this.props.history.push("/Home");
            else
                alert('Sorrrrrry !!!! Un-authenticated User !!!!!')
        })
}
  render() {
     return (
         < div>
            < form >
                < div class="row">
                    < div  >Sign Up </div >
                </div >

                < input type="text" onChange={this.name} placeholder="Enter username" />
                <br /><br />
                < input type="password" onChange={this.Password} placeholder="Enter Password" />
                <br /><br />
                <input type="password" onChange={this.state.confirmPassword} placeholder="ReEnter Password" />
                <br /><br />
                < Button onClick={this.SignUp}> Create Account</Button >
                <br /><br />
            </form >
    </div >
    );
  }
 }

登录.js

  import React, { Component } from 'react';

  import { Button } from 'react-bootstrap';
 export class Login extends Component {
  constructor() {
    super();
    this.state = {
        name: '',
        Password: ''

    }
    this.Password = this.Password.bind(this);
     this.name = this.name.bind(this);
    this.login = this.login.bind(this);
}
name(event) {
    this.setState({ name: event.target.value })
}
Password(event) {
    this.setState({ Password: event.target.value })
}

login(event) {
      fetch('url', {
       method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: this.state.name,
             Password: this.state.Password
        })
     }).then((Response) => Response.json())
        .then((result) => {
            console.log(result);
            if (result.Status == 'Invalid')
                alert('Invalid User');
            else
                this.props.history.push("/home");
            })
  }

   render(){
      return (
        <div>
            <form>
                <div class="row">
                    <div>Login </div>
                </div>
                <br /><br />
                <input type="text" onChange={this.name} placeholder="Enter username" />

                <br /><br />
                <input type="password" onChange={this.Password} placeholder="Enter Password" />
                <br /><br />

                <Button onClick={this.login} >Login</Button>  
            </form>
        </div>
    );
 }
 }

当用户注册时，数据将存储在服务器中。我使用 rest api 将数据发布到服务器。现在我必须使用 jwt 令牌发送数据。用户登录时应使用此令牌进行授权。

我不明白如何生成 jwt 令牌并将其用于授权。使用 JWT，我必须在用户登录时进行授权。请帮助我。提前致谢。

Answer 1

当用户登录时，如果凭据有效，服务器应该提供jwt 作为响应（对登录操作）。在您的反应应用程序中，您只应该在随后对服务器的调用中添加jwt。