{"id":352,"date":"2022-06-19T10:17:16","date_gmt":"2022-06-19T01:17:16","guid":{"rendered":"https:\/\/www.kd2.jp\/memo3\/?p=352"},"modified":"2022-06-19T10:20:12","modified_gmt":"2022-06-19T01:20:12","slug":"react-jwt","status":"publish","type":"post","link":"https:\/\/www.kd2.jp\/memo3\/?p=352","title":{"rendered":"React + JWT"},"content":{"rendered":"

Spring + RESTful + JWT\u3078React\u304b\u3089<\/a>\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u3002<\/p>\n

 <\/p>\n

Login.js<\/p>\n

\n
import React, { useState } from 'react';\r\nimport Hello from '.\/Hello';\r\n\r\nconst Login = () => {\r\n    const [user, setUser] = useState({username: '', password: ''});\r\n    const [isAuthenticated, setAuth] = useState(false);\r\n\r\n    const handleChange = (event) => {\r\n        setUser({...user, [event.target.name] : event.target.value})\r\n    }\r\n\r\n    const login = () => {\r\n        fetch(\"http:\/\/localhost:8080\/login\", \r\n        {\r\n            method : \"POST\",\r\n            headers : {\r\n                'Content-Type' : 'application\/json'\r\n            },\r\n            body: JSON.stringify(user)\r\n        })\r\n        .then(response => response.json())\r\n        .then(responseJSON => {\r\n            const jwttoken = responseJSON.token;\r\n            if (jwttoken !== null) {\r\n                sessionStorage.setItem(\"jwttoken\", jwttoken);\r\n                setAuth(true);\r\n            }\r\n        })\r\n        .catch(error => console.error(error))\r\n    }\r\n\r\n    if (isAuthenticated) {\r\n        return(\r\n            <div>\r\n                <Hello \/>\r\n            <\/div>  \r\n        );\r\n    }\r\n    else {\r\n        return(\r\n            <div>\r\n                <input type=\"text\" name=\"username\" onChange={handleChange} \/><br \/>\r\n                <input type=\"password\" name=\"password\" onChange={handleChange} \/><br \/>\r\n                <button onClick={login}>Login<\/button>\r\n            <\/div>\r\n        );\r\n    }\r\n\r\n}\r\n\r\nexport default Login;<\/pre>\n<\/div>\n
Hello.js<\/p>\n
\n
import React, { useLayoutEffect, useState } from 'react';\r\nimport Login from '.\/Login';\r\n\r\nconst Hello = () => {\r\n    const [greeting, setGreeting] = useState(\"\");\r\n    const [isAuthenticated, setAuth] = useState(false);\r\n\r\n    useLayoutEffect(() => {\r\n        hello();\r\n    });\r\n\r\n    const hello = () => {\r\n        const jwttoken = sessionStorage.getItem(\"jwttoken\");\r\n        fetch(\"http:\/\/localhost:8080\/hello\",\r\n        {\r\n            method : \"POST\",\r\n            headers : {\r\n                'Authorization' : 'Bearer ' + jwttoken\r\n            },\r\n        })\r\n        .then(response => {\r\n            if (response.status === 200) {\r\n                setAuth(true);\r\n                return response.json();\r\n            }\r\n            sessionStorage.setItem(\"jwttoken\", \"\");\r\n            setAuth(false);\r\n            return null;\r\n        })\r\n        .then(responseJSON => {\r\n            if (responseJSON) {\r\n                setGreeting(responseJSON.greeting);\r\n            }\r\n        })\r\n        .catch(error => console.error(error))\r\n    }\r\n\r\n    if (isAuthenticated) {\r\n        return(\r\n            <div>\r\n                From Server : {greeting} \r\n            <\/div>\r\n        );\r\n    }\r\n    else {\r\n        return(\r\n            <div>\r\n                <Login \/>\r\n            <\/div>\r\n        );\r\n    }\r\n}\r\n\r\nexport default Hello;<\/pre>\n<\/div>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Spring + RESTful + JWT\u3078React\u304b\u3089\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u3002   Login.js import React, { useState } from ‘react’; import Hello fr… \u7d9a\u304d\u3092\u8aad\u3080 React + JWT<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"_links":{"self":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/352"}],"collection":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=352"}],"version-history":[{"count":4,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/352\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/352\/revisions\/356"}],"wp:attachment":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}