React + JWT

Spring + RESTful + JWTへReactからログインする。

 

Login.js

import React, { useState } from 'react';
import Hello from './Hello';

const Login = () => {
    const [user, setUser] = useState({username: '', password: ''});
    const [isAuthenticated, setAuth] = useState(false);

    const handleChange = (event) => {
        setUser({...user, [event.target.name] : event.target.value})
    }

    const login = () => {
        fetch("http://localhost:8080/login", 
        {
            method : "POST",
            headers : {
                'Content-Type' : 'application/json'
            },
            body: JSON.stringify(user)
        })
        .then(response => response.json())
        .then(responseJSON => {
            const jwttoken = responseJSON.token;
            if (jwttoken !== null) {
                sessionStorage.setItem("jwttoken", jwttoken);
                setAuth(true);
            }
        })
        .catch(error => console.error(error))
    }

    if (isAuthenticated) {
        return(
            <div>
                <Hello />
            </div>  
        );
    }
    else {
        return(
            <div>
                <input type="text" name="username" onChange={handleChange} /><br />
                <input type="password" name="password" onChange={handleChange} /><br />
                <button onClick={login}>Login</button>
            </div>
        );
    }

}

export default Login;

Hello.js

import React, { useLayoutEffect, useState } from 'react';
import Login from './Login';

const Hello = () => {
    const [greeting, setGreeting] = useState("");
    const [isAuthenticated, setAuth] = useState(false);

    useLayoutEffect(() => {
        hello();
    });

    const hello = () => {
        const jwttoken = sessionStorage.getItem("jwttoken");
        fetch("http://localhost:8080/hello",
        {
            method : "POST",
            headers : {
                'Authorization' : 'Bearer ' + jwttoken
            },
        })
        .then(response => {
            if (response.status === 200) {
                setAuth(true);
                return response.json();
            }
            sessionStorage.setItem("jwttoken", "");
            setAuth(false);
            return null;
        })
        .then(responseJSON => {
            if (responseJSON) {
                setGreeting(responseJSON.greeting);
            }
        })
        .catch(error => console.error(error))
    }

    if (isAuthenticated) {
        return(
            <div>
                From Server : {greeting} 
            </div>
        );
    }
    else {
        return(
            <div>
                <Login />
            </div>
        );
    }
}

export default Hello;

 

投稿日: