22.04.01 localStorage를 이용한 로그인 유지

홍왕열·2022년 3월 31일
1

Second Project

목록 보기
4/7

클라이언트에서 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());
    }
  }, []);
profile
코딩 일기장

0개의 댓글