axios interceptor 와 navigate

Question

안녕하세요. 리액트와 스프링부트를 통한 로그인 구현 중 이해가 되지 않는 부분이 있어 여쭤보려 합니다.로그인 시 서버로부터 accessToken을 넘겨받고 있습니다.(Token을 recoil에 저장/ 토큰 존재 유무 == 로그인 유무)axios Interceptor를 통하여 아래 내용들을 구현해두었습니다.서버 api 요청 시 accessToken을 세팅 - config2. 서버 api 요청 시 accessToken 유효기간 만료 응답인 경우 - response2.1 자동 로그인인 경우엔 refresh토큰을 통한 accessToken재발급,2.2 그 외는 로그인 페이지로 navigate처리2.2 추가 내용) 만료 응답으로 인하여 로그인 페이지로 넘어갈 때, 해당 거절 당한 페이지를 기억해두었다가 로그인 완료 시 해당 페이지로 navigate해준다.Bodyfunction Body(){ return (

//컴포넌트 배치 {/* 비회원 */} }> }/> } /> } /> } /> } /> {/* 회원 전용 */} }> }> }/>

) }Login 일부분const from = location?.state?.redirectedFrom?.pathname||'/'; //거절당한 페이지로 이동하기 위한 경로 ... const onSubmit = async (value:LoginFormValue) =>{ setIsLoading(true); const loginParams : LoginFormValue = { userId: getValues("userId"), userPwd: getValues("userPwd"), autoLogin:getValues("autoLogin") ? true :false } doLoginFetch(loginParams) .then((data)=>{ if(data.code=="S00"){ alert("로그인 성공"); //recoil 내 로그인 시 응답받은 데이터 저장 setAuthUserInfo({ accessToken:data.data.accessToken, //★1 refreshToken:data.data.refreshToken, userId:data.data.userId, userNo:data.data.userNo }); navigate(from); } ... ;axiosInterceptorfunction TokenRefresher(){ .... useEffect(()=>{ .... //요청 인터셉터(PrivateAPI인스턴스를 통한 api 요청 시 가로챔) PrivateAPI.interceptors.request.use( (config) => { //헤더 내 accessToken세팅 let accessToken = authUserInfo.accessToken; //여기서 안되네?? 토큰만료로 인한 재로그인 시 요청 인터셉터 들어올 때, 가장 최초 로그인 시 응답받은 accessToken세팅이 된다..? config.headers['Content-Type'] = 'application/json'; config.headers['Authorization'] = `Bearer ${authUserInfo.accessToken}`; //★2 return config; }, ... ); //응답 인터셉터(PrivateAPI인스턴스를 통한 api 응답 시 가로챔) const interceptor = PrivateAPI.interceptors.response.use( //정상응답인경우 (response)=>{return response;}, //200 외 응답인 경우 async (error)=>{ const originalConfig = error.config; const code = error.response.data.code; if(code =="T01"){ //accessToken만료인 경우 if(authUserInfo.refreshToken){ //자동로그인 경우 .... //refresh토큰을 통한 재로그인 진행 .. } else{ //자동로그인 아닌 경우 resetAuthUserInfo(); navigate("/login"); } } } );PrivateRouteimport { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom"; import { useRecoilValue } from "recoil"; import { isLoginSelector } from "../../../atoms/AuthUserInfo"; function PrivateRoute(){ const isLogin = useRecoilValue(isLoginSelector); const currentLocation = useLocation(); return isLogin? : ; //api 요청 거절당한 페이지를 기억 } export default PrivateRoute;상황)첫 로그인(자동로그인X) -> accessToken발급api 요청 -> 이 때, accessToken 만료로그인 페이지 이동(api 요청 거절당한 페이지 기억)재로그인 성공(새로운 accessToken 발급)거절당한 페이지로 돌아가 새로 발급받은 accessToken으로 요청 -> 확인 시, 새로 발급 받은 토큰이 아닌 첫 로그인 시 발급받은 accessToken으로만 api 요청되고 있음코드를 봤을 땐, 아래와 같이 정상적으로 되는 것처럼 보입니다.★1 - 재로그인 시 recoil 내 새로 발급받은 accessToken 세팅★2 - navigate로 처리로 인해 서버api 재요청 시 ★1에서 저장한 (새로 발급받은) accessToken 세팅어디가 문제이기에 재로그인을 통하여 서버api 재요청 시 첫 로그인 시 발급 받은 accessToken으로 api가 요청되는 걸까요??navigate와 axios간 문제로 보이는 거 같습니다..

몰랑토끼 · Answer

interceptors 를 잘못쓰신거같은데 useeffect 나 function안에 들어갈애가 아니에요

Teveloper · Answer

interceptors를 PrivateAPI 선언한 곳에서 사용해주세요 다음처럼

axios interceptor 와 navigate

2개의 답변

Q&A 목록