login 전역상태관리

로그인 기능을 구현하면서,

isLogin, accessToken, refreshToken 을 전역상태로 관리해주기로 하였다.

로컬 스토리지를 이용하여서 관리를 하려고 하였지만, 

 redux-persist가 로컬 스토리지에서 상태를 저장해주면서, 보안 측면에서 더 낫다고 하여서  redux-persist로 상태를 관리해주었다.

 

타입스크립트, redux-toolkit, redux-persist 등 사용해보지 못한 기술들을 접해보아서 정신이 없긴했다.

 

store/slice/loginSlice.ts

Login이라는 타입을 지정해 준뒤, 내부의 값까지 타입을 지정해주었다.

그 후 초기 상태를 지정해준 뒤, loginSlice를 생성해주었다.

 

생성된 loginSlice 안의 login, logout 이라는 reudcers를 만들었다.

login은 accessToken,refreshToken을 인자로 받고 토큰의 값들을 설정해주고, isLogin 상태를 true로 설정해준다

logout은 null을 인자로 받으며, 토큰의 값들을 null로 초기화하고 isLogin 상태를 false로 설정해준다.

 

store/index.ts

persist를 적용하기 위해서 persistConfig의 whitelist에 login reducer를 추가해 주었다.

이로써 , 로그인의 상태와 토큰의 값이 redux-persist와 로컬 스토리지를 이용한 상태관리가 가능해졌다.