질문있습니다..
회원가입 api를 요청하고 프론트에서 이런식으로 받아왔습니다.
---------프론트 코드-------
const res: AxiosResponse<IRegisterResponse> = await instance.post(
'/api/users',
body,
config
);
if (res.data.token) {
localStorage.setItem('token', res.data.token);
localStorage.setItem('user', res.data.user.nickname);
}
근데 회원가입이나 로그인하면 바로 로그인된것처럼 해주려면 위의 if(res.data.token){ ...} 이렇게 로컬스토리지로해주면되는건가요?
나중에 로그인사용자만 할 수 있는 기능들은 어차피
서버에 토큰을 전달해줘서 판단해주면되는거니까.. 이렇게해주나요 보통?
근데 이렇게하고서 그다음 어떻게해줘야하나요?..
Header.tsx 컴포넌트에서 어떻게 뭘 보고 재렌더링되게 해줘야할까요?
페이지 새로고침은 뭔가 사용자측면에서 안좋은거같아서 헤더에서 로그인부분만 유저 닉네임으로 바꿔주려고합니다.
걍 이런식으로할까요? 위의 if(res.data.token){..} 코드 부분은 그대로두고!
전역관리를위한 리액트리코일써서, 회원가입 및 로그인때 유저닉네임 저장해주고,
헤더컴포넌트에서 리액트리코일 값 || 로컬스토리지값 이런식으로 조건문줘서하는게 베스트인가요?
그렇게하고서
App.tsx에서
또 따로 처리해줘야하는게있을까요?
useEffect(()=>{
// 사용자 인증처리
api.get('/api/auth);
},[]);
뭐 이런건 안해줘도되는걸까요?
