From ecc1b5cc1559f31f05006d8e30a3b6890e6200bc Mon Sep 17 00:00:00 2001 From: hyu-dev Date: Mon, 18 Dec 2023 20:55:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix.=20axios=20authorization=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/axios.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/axios.ts b/src/api/axios.ts index e765517..6daa2b3 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -8,7 +8,7 @@ authFetch.interceptors.request.use( (config) => { config.headers['Content-Type'] = 'application/json'; config.headers['Accept'] = 'application/json'; - config.headers.Authorization = `Bearer ${localStorage.getItem('rb-access-token')}`; + config.headers.Authorization = `${localStorage.getItem('rb-access-token')}`; return config; }, (error) => { From e9de350c4ce977b67b371e742f4227dde523f7dc Mon Sep 17 00:00:00 2001 From: hyu-dev Date: Mon, 18 Dec 2023 21:00:49 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix.=20localStorage=20token=20replace=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../KakaoCallback/CallbackTemplate.tsx | 136 +++++++++--------- 1 file changed, 68 insertions(+), 68 deletions(-) diff --git a/src/components/templates/LoginTemplate/KakaoCallback/CallbackTemplate.tsx b/src/components/templates/LoginTemplate/KakaoCallback/CallbackTemplate.tsx index f4ed334..384c43f 100644 --- a/src/components/templates/LoginTemplate/KakaoCallback/CallbackTemplate.tsx +++ b/src/components/templates/LoginTemplate/KakaoCallback/CallbackTemplate.tsx @@ -1,76 +1,76 @@ -import axios from "axios" -import {useEffect} from "react"; -import {authFetch} from "@api/axios"; -import {TLoginResType} from "@api/types"; -import {useNavigate} from "react-router-dom"; -import {useDispatch} from "react-redux"; -import {TAppDispatch} from "@/store/state"; -import {setAccessToken} from "@/store/reducers"; -import {Alert} from "@/utils"; +import { setAccessToken } from '@/store/reducers'; +import { TAppDispatch } from '@/store/state'; +import { Alert } from '@/utils'; +import { TLoginResType } from '@api/types'; +import axios from 'axios'; +import { useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; export const CallbackTemplate = () => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const params = new URL(document.location.toString()).searchParams; + const code = params.get('code'); + const grantType = 'authorization_code'; + const REACT_APP_SERVER_PATH: string | undefined = process.env.REACT_APP_SERVER_PATH; + const REST_API_KEY = process.env.REACT_APP_KAKAO_API_KEY; + const redirectUri: string = process.env.REACT_APP_REDIRECT_URL + '/login/auth'; - const dispatch = useDispatch(); - const navigate = useNavigate(); - const params = new URL(document.location.toString()).searchParams; - const code = params.get('code'); - const grantType = "authorization_code"; - const REACT_APP_SERVER_PATH: string | undefined = process.env.REACT_APP_SERVER_PATH; - const REST_API_KEY = process.env.REACT_APP_KAKAO_API_KEY; - const redirectUri: string = process.env.REACT_APP_REDIRECT_URL + '/login/auth'; + useEffect(() => { + handleKakaoLogin(); + }, []); - useEffect(() => { - handleKakaoLogin(); - }, []); - - const handleKakaoLogin = async () => { - try{ - const res = await axios.post( - `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${REST_API_KEY}&redirect_uri=${redirectUri}&code=${code}`, - {}, - { - headers: { - "Content-type": "application/x-www-form-urlencoded;charset=utf-8" - } - } - ); - if(res.status === 200){ - const { access_token } = res.data; - const resData = await axios.post(`${REACT_APP_SERVER_PATH}/api/user/login-guest`, {}, { - headers: { - Authorization: `Bearer ${access_token}` - } - }); - if(resData.status === 200){ - const extractedToken = resData.headers?.authorization?.replace("Bearer ", ""); - localStorage.setItem("rb-access-token", extractedToken); - localStorage.setItem("rb-user-info", JSON.stringify(resData.data)); - dispatch(setAccessToken(resData.data.accessToken)); - navigate("/"); - }else{ - Alert.error({ - title: 'Error', - text: `로그인 에러가 발생했습니다.` - }); - navigate("/login"); - } - }else{ - Alert.error({ - title: 'Error', - text: `카카오 로그인 에러가 발생했습니다.` - }); - navigate("/login"); + const handleKakaoLogin = async () => { + try { + const res = await axios.post( + `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${REST_API_KEY}&redirect_uri=${redirectUri}&code=${code}`, + {}, + { + headers: { + 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' + } + } + ); + if (res.status === 200) { + const { access_token } = res.data; + const resData = await axios.post( + `${REACT_APP_SERVER_PATH}/api/user/login-guest`, + {}, + { + headers: { + Authorization: `Bearer ${access_token}` } - }catch (err: any){ - Alert.error({ - title: 'Error', - text: `로그인 에러가 발생했습니다.` - }); - navigate("/login"); + } + ); + if (resData.status === 200) { + const extractedToken = resData.headers?.authorization; + localStorage.setItem('rb-access-token', extractedToken); + localStorage.setItem('rb-user-info', JSON.stringify(resData.data)); + dispatch(setAccessToken(resData.data.accessToken)); + navigate('/'); + } else { + Alert.error({ + title: 'Error', + text: `로그인 에러가 발생했습니다.` + }); + navigate('/login'); } + } else { + Alert.error({ + title: 'Error', + text: `카카오 로그인 에러가 발생했습니다.` + }); + navigate('/login'); + } + } catch (err: any) { + Alert.error({ + title: 'Error', + text: `로그인 에러가 발생했습니다.` + }); + navigate('/login'); } + }; - return ( - <> - ) -} + return <>; +};