Как сгенерировать токен JWT в реакции js - PullRequest
Новая
       7

Как сгенерировать токен JWT в реакции js

1 голос
/ 14 марта 2020

Я новичок в концепции JWT. У меня есть форма регистрации и логин. Регистрация. 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>
    );
 }
 }

Когда пользователь зарегистрируется, данные будут сохранены на сервере. Я использую остальные API для публикации данных на сервере. Теперь я должен отправить данные с помощью токена jwt. Когда пользователь входит в систему, авторизация должна выполняться с использованием этого токена.

Я не понимаю, как генерировать токены jwt и использовать его для авторизации. Используя JWT, я должен выполнять авторизацию, когда пользователь входит в систему. Пожалуйста, помогите меня . Заранее спасибо.

1 Ответ

0 голосов
/ 14 марта 2020

Когда пользователь входит в систему, сервер должен предоставить jwt в ответ (на действие входа в систему), если учетные данные действительны. В вашем приложении реакции вы должны добавить jwt только при последующих вызовах на сервер.

...