[Feat]로그인 시 토큰 저장

비밀번호 설정 모달에서 백엔드 메시지를 200이 아닌 201로 받음 구글/카카오/이메일 로그인 성공 시 엑세스 토큰과 리프레시 토큰을 변수와 로컬 스토리지에 저장 Issues #15
codestates-seb · Sep 8, 2023 · fb93216 · fb93216
1 parent 09f18b7
commit fb93216
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/client/src/components/Logins/EmailLogin.tsx b/client/src/components/Logins/EmailLogin.tsx
@@ -31,14 +31,19 @@ const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) =
   const handleLoginClick = async () => {
     try {
       // 백엔드에 로그인 요청
-      const response = await axios.post("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/login", {
+      const response = await axios.post("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members/login", {
         email,
         password,
       });
       if (response.status === 200) {
-        // 성공적으로 로그인된 경우, 토큰을 로컬 스토리지에 저장
-        const authToken = response.data.authorization;
-        localStorage.setItem('authToken', authToken);
+        const authToken = response.headers['authorization'];
+        const accessToken = response.headers['accessToken'];
+        const refreshToken = response.headers['refreshToken'];
+
+        // 토큰들을 로컬 스토리지에 저장
+        if(authToken) localStorage.setItem('authToken', authToken);
+        if(accessToken) localStorage.setItem('accessToken', accessToken);
+        if(refreshToken) localStorage.setItem('refreshToken', refreshToken);
         onLogin();
         onClose();
       } else {

diff --git a/client/src/components/Logins/OAuthLogin.tsx b/client/src/components/Logins/OAuthLogin.tsx
@@ -19,6 +19,14 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
       try {
           const response = await axios.post('/oauth2/authorization/google');
           if (response.status === 200) {
+            const authToken = response.headers['authorization'];
+            const accessToken = response.headers['accessToken'];
+            const refreshToken = response.headers['refreshToken'];
+
+            // 토큰들을 로컬 스토리지에 저장
+            if(authToken) localStorage.setItem('authToken', authToken);
+            if(accessToken) localStorage.setItem('accessToken', accessToken);
+            if(refreshToken) localStorage.setItem('refreshToken', refreshToken);
               console.log("Successfully logged in with Google!");
               onClose();
           } else {
@@ -34,6 +42,14 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
       try {
           const response = await axios.post('/oauth2/authorization/kakao');
           if (response.status === 200) {
+            const authToken = response.headers['authorization'];
+            const accessToken = response.headers['accessToken'];
+            const refreshToken = response.headers['refreshToken'];
+
+            // 토큰들을 로컬 스토리지에 저장
+            if(authToken) localStorage.setItem('authToken', authToken);
+            if(accessToken) localStorage.setItem('accessToken', accessToken);
+            if(refreshToken) localStorage.setItem('refreshToken', refreshToken);
               console.log("Successfully logged in with Kakao!");
               onClose();
           } else {

diff --git a/client/src/components/Signups/Password.tsx b/client/src/components/Signups/Password.tsx
@@ -60,7 +60,7 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
                 confirmPassword,
             });
 
-            if (response.status === 200) {
+            if (response.status === 201) {
                 console.log('Data sent successfully');
                 onClose();
                 onNext();