如何在 React js 中生成 JWT 令牌

Posted 2023-03-10

【中文标题】如何在 React js 中生成 JWT 令牌

【英文标题】：How to generate JWT token in react js

【发布时间】：2020-06-26 00:12:27

【问题描述】：

我是 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，我必须在用户登录时进行授权。请帮助我。提前致谢。

【参考方案1】：

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

【讨论】：

好吧..但是我们注册的时候不需要传递token吗？