{"id":429,"date":"2024-01-27T08:29:12","date_gmt":"2024-01-26T23:29:12","guid":{"rendered":"https:\/\/www.kd2.jp\/memo3\/?p=429"},"modified":"2024-01-30T05:43:40","modified_gmt":"2024-01-29T20:43:40","slug":"react-jwt-2","status":"publish","type":"post","link":"https:\/\/www.kd2.jp\/memo3\/?p=429","title":{"rendered":"React + JWT p2"},"content":{"rendered":"


\nFastAPI
\nSimple OAuth2 with Password and Bearer
\n<\/a>\u306b\u3064\u306a\u3052\u3066\u30c6\u30b9\u30c8\u3059\u308b\u3002<\/p>\n

 <\/p>\n

index.tsx<\/p>\n

\n
import React from 'react';\r\nimport ReactDOM from 'react-dom\/client';\r\nimport '.\/index.css';\r\nimport UsersMe from '.\/UsersMe';\r\nimport reportWebVitals from '.\/reportWebVitals';\r\n\r\nconst root = ReactDOM.createRoot(\r\n  document.getElementById('root') as HTMLElement\r\n);\r\nroot.render(\r\n  <React.StrictMode>\r\n    <UsersMe \/>\r\n  <\/React.StrictMode>\r\n);\r\n\r\n\/\/ If you want to start measuring performance in your app, pass a function\r\n\/\/ to log results (for example: reportWebVitals(console.log))\r\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\r\nreportWebVitals();\r\n<\/pre>\n<\/div>\n
Login.tsx<\/p>\n
\n
import React, { useState } from 'react';\r\nimport UsersMe from '.\/UsersMe';\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 : any) => {\r\n        setUser({...user, [event.target.name] : event.target.value})\r\n    }\r\n\r\n    const login = () => {\r\n        console.log(JSON.stringify(user));\r\n        fetch(\"http:\/\/127.0.0.1:8000\/token\", \r\n        {\r\n            method : \"POST\",\r\n            headers : {\r\n                'Content-Type' : 'application\/x-www-form-urlencoded'\r\n            },\r\n            body: `username=${user.username}&password=${user.password}`\r\n        })\r\n        .then(response => response.json())\r\n        .then(responseJSON => {\r\n            const access_token = responseJSON.access_token;\r\n            if (access_token !== null) {\r\n                sessionStorage.setItem(\"access_token\", access_token);\r\n                setAuth(true);\r\n            }\r\n        })\r\n        .catch(error => {\r\n            console.error(error);\r\n        })\r\n    }\r\n\r\n    if (isAuthenticated) {\r\n        return(\r\n            <div>\r\n                <UsersMe \/>\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
UsersMe.tsx<\/p>\n
\n
import React, { useLayoutEffect, useState } from 'react';\r\nimport Login from '.\/Login';\r\nimport UsersMeItem from '.\/UsersMeItems';\r\n\r\nconst UsersMe = () => {\r\n    const [userInfo, setUserInfo] = useState(\"\");\r\n    const [isAuthenticated, setAuth] = useState(false);\r\n\r\n    useLayoutEffect(() => {\r\n        users_me();\r\n    });\r\n\r\n    const users_me = () => {\r\n        const access_token = sessionStorage.getItem(\"access_token\");\r\n        fetch(\"http:\/\/localhost:8000\/users\/me\",\r\n        {\r\n            method : \"GET\",\r\n            headers : {\r\n                'Authorization' : 'Bearer ' + access_token\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(\"access_token\", \"\");\r\n            setAuth(false);\r\n            return null;\r\n        })\r\n        .then(responseJSON => {\r\n            if (responseJSON) {\r\n                setUserInfo(JSON.stringify(responseJSON));\r\n            }\r\n        })\r\n        .catch(error => {\r\n            console.error(error);\r\n        })\r\n    }\r\n\r\n    const logout = () => {\r\n        sessionStorage.setItem(\"access_token\", \"\");\r\n        setAuth(false);\r\n    }\r\n\r\n    if (isAuthenticated) {\r\n        return(\r\n            <div>\r\n                Me : {userInfo} \r\n                <UsersMeItem \/> \r\n                <button onClick={logout}>Logout<\/button>\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 UsersMe;<\/pre>\n<\/div>\n
UsersMeItems.tsx<\/p>\n
\n
import React, { useLayoutEffect, useState } from 'react';\r\n\r\nconst UsersMeItem = () => {\r\n    const [itemInfo, setItemInfo] = useState(\"\");\r\n\r\n    useLayoutEffect(() => {\r\n        users_me_item();\r\n    });\r\n\r\n    const users_me_item = () => {\r\n        const access_token = sessionStorage.getItem(\"access_token\");\r\n        fetch(\"http:\/\/localhost:8000\/users\/me\/items\",\r\n        {\r\n            method : \"GET\",\r\n            headers : {\r\n                'Authorization' : 'Bearer ' + access_token\r\n            },\r\n        })\r\n        .then(response => {\r\n            if (response.status === 200) {\r\n                return response.json();\r\n            }\r\n            return null;\r\n        })\r\n        .then(responseJSON => {\r\n            if (responseJSON) {\r\n                setItemInfo(JSON.stringify(responseJSON));\r\n            }\r\n        })\r\n        .catch(error => {\r\n            console.error(error);\r\n        })\r\n    }\r\n\r\n    return(\r\n        <div>\r\n            Item : {itemInfo}\r\n        <\/div>\r\n    );\r\n}\r\n\r\nexport default UsersMeItem;<\/pre>\n<\/div>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
FastAPI Simple OAuth2 with Password and Bearer \u306b\u3064\u306a\u3052\u3066\u30c6\u30b9\u30c8\u3059\u308b\u3002   index.tsx import React from ‘react’; import … \u7d9a\u304d\u3092\u8aad\u3080 React + JWT p2<\/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\/429"}],"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=429"}],"version-history":[{"count":7,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/429\/revisions"}],"predecessor-version":[{"id":438,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/429\/revisions\/438"}],"wp:attachment":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}