react router dom 로그인 문제 해결[20221012 TIL]

로그인을 해도 헤더의 화면이 갱신되지 않는 문제가 발생했다.

 

로그인 헤더에

ㅇ

회원가입 로그인 그리고 홈 화면이 나와야하는데 문제는

 

로그인 후에도 계속 로그인 전 화면이 나온다는 것이다..

 

문제의 원인

헤더는 엑세스토큰이 있냐 없냐의 유무에 따라 바뀌는데

 

원인은 일단 로컬 스토리지에서 받아온 엑세스 토큰을 헤더에서 콘솔로 아무리 찍어봐도 인식을 못해다.

 

그렇지만 또 어플리케이션의 스토리지에는 들어와있고...

 

해결을 위한 시도들

 

일단 커맨드 R로 새로고침을 하면 엑세스토큰을 인식하길래

1. forceUpdate라는 함수를 만들어서 화면 전체를 리랜더링 해보았다. -> 실패 ( 원인 파악 불명), 콘솔로 찍어도 여전히 인식 못함)

 

2. useEffect로 엑세스 토큰의 변화가 감지되면 forceUpdate -> 실패 여전히 감지불가

 

등등 어떤식으로 변화를 감지하려고해도 헤더에서는 안되었다.

 

이걸로 며칠을 고민...

 

해결

그보다 상위 컴포넌트인 App에서 로컬스토리지를 이용하여 받아온 엑세스토큰을 콘솔로 찍어보니 인식하는게 아닌가.

 

그래서 거기서 받아온 엑세스 토큰과 셋엑세스 토큰을 인자로 Header에 넣어주어 받아쓰니 해결! 

 

로그인 하자마자 헤더가 갱신된다....

 

const [accessToken, setAccessToken] = useLocalStorage('accessToken', '');

useEffect(() => {

apiService.setAccessToken(accessToken);

if (accessToken) {

userStore.fetchUser();

console.log('accessToken FROM APP', accessToken);

}

}, [accessToken]);

 

 

<Header

accessToken={accessToken}

setAccessToken={setAccessToken}

/>

 

일단 다행이다... 휴 제발