oauth redirecturl 새로고침 질문있습니다.

Question

React 프로젝트 진행중입니다. 카카오 로그인을 구현했는데, 궁금한 점이 사용자가 id, pw를 입력하고 인가코드를 받아오는데서 새로고침이 발생합니다. useLocation의 state 옵션에 이전 페이지 경로를 저장해놨고, 이를 이용하여 로그인 이후에 사용자가 이전 페이지로 돌아오게 끔 하려고 했습니다. 그런데 새로고침 때문에 모든 상태가 초기화 됩니다. 새로고침이 발생하는 것은 어쩔 수 없는 건가요? 어쩔수 없다면 세션스토리지에 경로를 저장하려고 합니다. 아래는 제 코드입니다. Kakao.tsx => kakaoLoginHandler에서 인가코드를 받아오는 곳 입니다.import { useEffect } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import axios, { AxiosResponse } from "axios"; import { auth as firebaseAuth } from "../../firebase/firestore"; import "../../Pages/Login.css"; import { signInWithCustomToken } from "firebase/auth"; declare global { interface Window { Kakao: any; } } interface Auth { firebaseToken: string; } type KakaoProps = { setLoading: (bool: boolean) => void; }; const KakaoLogin = ({ setLoading }: KakaoProps) => { const navigate = useNavigate(); const { state } = useLocation(); console.log(state) const { Kakao } = window; const searchParams = new URLSearchParams(document.location.search); const code = searchParams.get("code"); if (!window.Kakao.isInitialized()) { window.Kakao.init(process.env.REACT_APP_KAKAO_API_KEY); } useEffect(() => { if (!code) { return; } const kakaoLoginAttempt = async () => { try { setLoading(true); const res: AxiosResponse = await axios.post( `${process.env.REACT_APP_SERVER_POINT}/kakao`, { code } ); const { firebaseToken } = res.data; await signInWithCustomToken(firebaseAuth, firebaseToken); console.log(state) navigate(`${state}`, { replace: true }); } catch (error: any) { alert(error.message); setLoading(false); navigate("/login"); } }; kakaoLoginAttempt(); }); const kakaoLoginHandler = () => { setLoading(true); Kakao.Auth.authorize({ redirectUri: process.env.REACT_APP_KAKAO_REDIRECT_URI, scope: "profile_nickname profile_image account_email", }); }; return (

카카오톡 로그인

); }; export default KakaoLogin;

oauth redirecturl 새로고침 질문있습니다.

0개의 답변

Q&A 목록