reactjs - 如何在 React js 中生成 JWT 令牌
问题描述
我是 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,我必须在用户登录时进行授权。请帮助我。提前致谢。
解决方案
jwt
当用户登录时,如果凭据有效,服务器应该提供响应(登录操作)。在您的反应应用程序中,您只应该将jwt
后续调用添加到服务器。
推荐阅读
- go - 在 Wire Dependency Injection 中创建 Per-Provider Loggers
- php - 使用 Laravel 8 具有特定列的 GroupBy 数据
- python - 在 Python 中比较日期对象
- airflow - 无法提取 xcom 值
- excel - 运行 GoalSeek 后存储值
- node.js - Google Functions 发布请求错误 - 请求未通过访问控制检查:它没有 HTTP ok 状态
- regex - 什么正则表达式在 2 个模式行之间产生结果?
- python - SQL Server python脚本执行返回0x80004004
- sql - 如何根据变量的字符串长度添加前导空格?
- c++ - 不同类型的输出 XCode 与 G++?