Storing the JWT

Kita akan coba login dan lihat data nya masuk ke local storage

LoginForm.jsx

import React, { Component } from "react";
import Joi from "joi-browser";
import Form from "./Common/Form";
import { login } from '../services/AuthService';

class LoginForm extends Form {
    state = {
        data : {
            username: '',
            password: ''
        },
        errors: {}
    };

    schema = {
        username: Joi.string().required().label("Username"),
        password: Joi.string().required().label("Password")
    };
    
    doSubmit = async () => {
        try {
            const { data } = this.state;
            const { data: jwt } = await login(data.username, data.password);
            // console.log(jwt)
            localStorage.setItem("token", jwt);
            this.props.history.push('/');
        } catch (error) {
            if (error.response && error.response.status === 400) {
                const errors = { ...this.state.errors };
                errors.username = error.response.data;
                this.setState({ errors });
            }
        }
    };

    render(){
        return (
            <>
                <div>
                    <h1>Login</h1>
                    <form onSubmit={this.handleSubmit} >
                        {this.renderInput('username', 'Username')}
                        {this.renderInput('password', 'Password', "password")}
                        {this.renderButton('Login')}
                    </form>
                </div>
            </>
        )
    }
}

export default LoginForm

Check di barisan 26 di coding nya, ada codingan untuk redirect ke halaman home

this.props.history.push('/');

Last updated

Was this helpful?