클라이언트에서 localstorage를 사용하여 로그인을 유지하려고 하였는데, 너무 안 돼서 많은 시행착오 끝에 성공하였다.
문제는 localstorage에 넣는 KEY가 문제였는데, 처음에는 받아오는 유저 id로 넣으려고 했더니 되지가 않고 그냥 string으로 넣었더니 문제가 해결되었다.
완벽한 해결법은 아닌 것 같으니 나중에 다시 공부해서 알아보자.
function App(): any {
const dispatch = useDispatch();
const isLogin = useSelector(
(state: RootState) => state.changeLoginStatus.isLogin
);
const localStorageTokenCheck: string | null = localStorage.getItem("KEY");
//로컬스토리지에서 토큰 빼오기
useEffect(() => {
if (localStorageTokenCheck) {
dispatch(loginCheck());
}
}, []);
리듀서.
const LOGINCHECK = "logincheck";
const LOGOUTCHECK = "logoutcheck";
export const loginCheck = () => {
return {
type: LOGINCHECK,
};
};
export const logoutClickevent = () => {
console.log("logoutaction");
return {
type: LOGOUTCHECK,
};
};
const initialStore = { isLogin: false };
export const changeLoginStatus = (
state = initialStore,
action: { type: any }
) => {
switch (action.type) {
case LOGINCHECK:
return { ...state, isLogin: true };
case LOGOUTCHECK:
console.log("enter");
return { ...state, isLogin: false };
default:
return state;
}
};
//!아이디 유지하는 isLogin 관리
결국 방식은 로그인하여 토큰을 받으면 그 토큰을 로컬스토리지에 저장하고 로컬스토리지같은 경우는 토큰을 계속 가지고 있기 때문에 그 토큰을 이용하여 리듀서에 로그인 상태를 계속 true로 바꿔주는 것이 포인트.
localStorage.setItem("키", "저장할 내용")
APP(최상위 폴더) 에서 리덕스랑 이용해서 관리해야함(?)
function App() {
const dispatch = useDispatch();
// const isLogin = useSelector(
// (state: RootState) => state.changeLoginStatus.isLogin
// );
// console.log("isLogin", isLogin);
const localStorageTokenCheck: string | null = localStorage.getItem("KEY");
useEffect(() => {
if (localStorageTokenCheck) {
dispatch(loginCheck());
}
}, []);