From 3447f9a99397596f10f01a6c0430f682e922f34b Mon Sep 17 00:00:00 2001 From: Youjeong Park Date: Sun, 12 Mar 2023 14:48:54 +0900 Subject: [PATCH 1/3] feat: test login & logut 1. use jwt 2. test login & logout resolving: #11 related to: #11 --- host/src/pages/LogIn/index.tsx | 32 +++++++++++------- host/src/pages/Main/index.tsx | 59 +++++++++++++++++++++++++++++++--- 2 files changed, 75 insertions(+), 16 deletions(-) diff --git a/host/src/pages/LogIn/index.tsx b/host/src/pages/LogIn/index.tsx index 6659e1d..72f391e 100644 --- a/host/src/pages/LogIn/index.tsx +++ b/host/src/pages/LogIn/index.tsx @@ -6,20 +6,30 @@ import React, { useCallback, useState } from 'react'; import useSWR from 'swr'; const LogIn = () => { - const { data: userData, error, mutate } = useSWR('/api/users', fetcher); + // const { data: userData, error, mutate } = useSWR('/api/users', fetcher); const [logInError, setLogInError] = useState(false); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); - const onSubmit = useCallback( (e) => { - e.preventDefault(); - setLogInError(false); - axios.post('/api/users/login',{ email, password },{ withCredentials: true}) - .then(() => { mutate();}) - .catch((error) => { - setLogInError(error.response?.data?.code === 401); - }); - }, - [email, password, mutate], + + const onSubmit = useCallback((e) => { + e.preventDefault(); + setLogInError(false); + axios.post('/login', // 임시 server + { email, password }, { + withCredentials: true + }) + .then((response) => { + if (response.status === 200) { + // axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`; + window.open('/', '_self') + } + }) + .catch((error) => { + console.log("error") + setLogInError(error.response?.data?.code === 401); + }); + }, + [email, password], ); return ( diff --git a/host/src/pages/Main/index.tsx b/host/src/pages/Main/index.tsx index 4904633..bd7e2f4 100644 --- a/host/src/pages/Main/index.tsx +++ b/host/src/pages/Main/index.tsx @@ -1,25 +1,74 @@ import React from 'react'; +import { useEffect, useState } from "react"; +import axios from "axios"; +import { useRecoilState } from 'recoil'; +import { userState } from "../../store/atoms"; + const Main = () => { + const [isLogin, setIsLogin] = useState(false); + const [user, setUser] = useRecoilState(userState); const Menu = React.lazy(() => // @ts-ignore - import("remote/Menu").then((module) => {return {default: module.Menu}; + import("remote/Menu").then((module) => { + return { default: module.Menu }; }) ); + + useEffect(() => { + (async() => { + const {data} = await axios.get("/login/success"); + try{ + if(data){ + setIsLogin(true); + setUser({email : data.email, username : data.username}); + } + }catch(error){ + console.log(error); + } + })(); + }, []); + + useEffect(()=> { + console.log(user); + },[user]) + + const logout = () => { + axios({ + url: "/logout", + method: "POST", + withCredentials: true, + }).then((result) => { + if (result.status === 200) { + window.open("/login", "_self"); + } + }); + }; return (
여기가 Host
AOCE
-
- 회원가입 - 로그인 + {/*

Name: {user.email}

+

Age: {user.username}

*/} +
+ {isLogin &&
+ +
} + {!isLogin && +
+ 회원가입 + 로그인 +
+ }
Loading...
}> - +
From 6c9f3035b84b6dc0645796c5c4dd90d92cd51970 Mon Sep 17 00:00:00 2001 From: Youjeong Park Date: Sun, 12 Mar 2023 14:53:10 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat=20:=20add=20axios=20server=20axios=20s?= =?UTF-8?q?erver=20=EC=97=B0=EC=8A=B5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #resolving : #11 #ref : #1 --- host/src/bootstrap.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/host/src/bootstrap.tsx b/host/src/bootstrap.tsx index d8105e6..f801b0c 100644 --- a/host/src/bootstrap.tsx +++ b/host/src/bootstrap.tsx @@ -4,6 +4,9 @@ import App from "./App"; import reportWebVitals from "./reportWebVitals"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; +import axios from "axios"; +axios.defaults.baseURL = "http://localhost:8123"; // 임시 서버 +axios.defaults.withCredentials = true; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement From 8dfb3e52b480743d7cb4fa9395103e774a71c9ab Mon Sep 17 00:00:00 2001 From: Youjeong Park Date: Sun, 12 Mar 2023 15:42:50 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20add=20mixed=20boundary=20(#11)=20ax?= =?UTF-8?q?ios=20instance=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit resolve: #11 --- host/config-overrides.js | 1 + host/src/api/core/index.tsx | 41 ++++++++++++++++++++++++++++++++++ host/src/api/main.tsx | 30 +++++++++++++++++++++++++ host/src/pages/LogIn/index.tsx | 21 +++++------------ host/src/pages/Main/index.tsx | 38 +++++++++++++------------------ host/tsconfig.json | 1 + 6 files changed, 94 insertions(+), 38 deletions(-) create mode 100644 host/src/api/core/index.tsx create mode 100644 host/src/api/main.tsx diff --git a/host/config-overrides.js b/host/config-overrides.js index 4d6d603..c92383b 100644 --- a/host/config-overrides.js +++ b/host/config-overrides.js @@ -39,6 +39,7 @@ module.exports = function (config, env) { "@layouts": path.resolve(__dirname, "src/layouts"), "@hooks": path.resolve(__dirname, "src/hooks"), "@utils": path.resolve(__dirname, "src/utils"), + "@api": path.resolve(__dirname, "src/api") }), )(config, env) ); diff --git a/host/src/api/core/index.tsx b/host/src/api/core/index.tsx new file mode 100644 index 0000000..4d5682a --- /dev/null +++ b/host/src/api/core/index.tsx @@ -0,0 +1,41 @@ +import axios from "axios"; + +const request = axios.create({ + baseURL: "http://localhost:8123" +}) + +//요청 타임아웃 설정 +request.defaults.timeout = 2500; +request.defaults.withCredentials = true; +// request.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`; + +//요청 인터셉터 추가 +request.interceptors.request.use( + config => { //요청을 보내기 전에 수행할 로직 + return config + }, + error => { + //요청 에러가 발생했을 때 수행할 로직 + console.log(error); //디버깅 + return Promise.reject(error); + } +); + +//응답 인터셉터 추가 +request.interceptors.response.use( + response => { + //응답에 대한 로직 작성 + //const res = response.data + //return res + return response + }, + + error => { + //응답 에러가 발생했을 때 수행할 로직 + console.log(error); //디버깅 + return Promise.reject(error); + } +); + + +export default request; //axios 인스턴스를 내보낸다. \ No newline at end of file diff --git a/host/src/api/main.tsx b/host/src/api/main.tsx new file mode 100644 index 0000000..5216f86 --- /dev/null +++ b/host/src/api/main.tsx @@ -0,0 +1,30 @@ +import request from "./core"; + + +export const login = (email: string, password: string) => { + return request( + { + method: 'POST', + url: '/login', + data: { + email: email, + password: password + } + } + ) +} + +export const loginsuccess = () => { + return request({ + // method: 'GET', + url: '/login/success' + }); +} + +export const logout = () => { + return request({ + method: 'POST', + url: '/logout' + }); +} + diff --git a/host/src/pages/LogIn/index.tsx b/host/src/pages/LogIn/index.tsx index 72f391e..c35da5d 100644 --- a/host/src/pages/LogIn/index.tsx +++ b/host/src/pages/LogIn/index.tsx @@ -4,6 +4,7 @@ import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, useState } from 'react'; import useSWR from 'swr'; +import { login } from "@api/main" const LogIn = () => { // const { data: userData, error, mutate } = useSWR('/api/users', fetcher); @@ -11,23 +12,13 @@ const LogIn = () => { const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); - const onSubmit = useCallback((e) => { + const onSubmit = useCallback(async (e) => { e.preventDefault(); setLogInError(false); - axios.post('/login', // 임시 server - { email, password }, { - withCredentials: true - }) - .then((response) => { - if (response.status === 200) { - // axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`; - window.open('/', '_self') - } - }) - .catch((error) => { - console.log("error") - setLogInError(error.response?.data?.code === 401); - }); + const response = await login(email, password) + if (response.status === 200) { + window.open('/', '_self') + } }, [email, password], ); diff --git a/host/src/pages/Main/index.tsx b/host/src/pages/Main/index.tsx index bd7e2f4..01f0a7e 100644 --- a/host/src/pages/Main/index.tsx +++ b/host/src/pages/Main/index.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from "react"; import axios from "axios"; import { useRecoilState } from 'recoil'; import { userState } from "../../store/atoms"; - +import { loginsuccess, logout } from "@api/main" const Main = () => { const [isLogin, setIsLogin] = useState(false); @@ -15,36 +15,28 @@ const Main = () => { return { default: module.Menu }; }) ); - + useEffect(() => { - (async() => { - const {data} = await axios.get("/login/success"); - try{ - if(data){ + (async () => { + const { data } = await loginsuccess(); + try { + if (data) { setIsLogin(true); - setUser({email : data.email, username : data.username}); + setUser({ email: data.email, username: data.username }); } - }catch(error){ + } catch (error) { console.log(error); } })(); }, []); - useEffect(()=> { - console.log(user); - },[user]) - - const logout = () => { - axios({ - url: "/logout", - method: "POST", - withCredentials: true, - }).then((result) => { - if (result.status === 200) { - window.open("/login", "_self"); - } - }); + const logoutPage = async () => { + const data = await logout(); + if (data.status === 200) { + window.open("/login", "_self"); + } + }; return ( @@ -55,7 +47,7 @@ const Main = () => {

Age: {user.username}

*/}
{isLogin &&
-
} diff --git a/host/tsconfig.json b/host/tsconfig.json index 63ee85e..cae8f13 100644 --- a/host/tsconfig.json +++ b/host/tsconfig.json @@ -26,6 +26,7 @@ "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@hooks/*": ["hooks/*"], + "@api/*": ["api/*"] } }, "include": [