새로고침 후에도 로그인 유지하기

project 진행 중 새로고침을 하면 로그인이 풀리는 현상을 발견했다.

검색을 해보니 로그인을 해서 받아온 토큰을 localstorage에 저장 후 사용하는 방법으로 유지하는 것을 알았다.

localstorage에 저장하는 방법

const handleLogin = () => {
    if (loginInfo.email && loginInfo.password) {
      let { email, password } = loginInfo;
      axios
        .post(
          `${process.env.REACT_APP_API_URL}/user/login`,
          {
            email,
            password,
          },
          {
            withCredentials: true,
          }
        ) //로그인 요청
       .then((res) => {
          if (res.data.data.id && res.data.data.accessToken) {
            dispatch({
              type: "accessToken",
              payload: {
                id: res.data.data.id,
                accessToken: res.data.data.accessToken,
              },
            }); //! 토큰과 id를 redux state에 저장하는 것.(id 나중에 사용)
            localStorage.setItem(res.data.data.id, res.data.data.accessToken);
          }
          //로컬스토리지에 저장하는 법. 첫 번째 인자가 Key, 두 번째 인자가 토큰
        })

localstorage에서 토큰 값 빼오기(로그인 때 받아온 유저 ID를 이용하여)

const localId = useSelector((localId: RootState) => localId.Reducer.id);
  //서버에서 user id를 redux에 저장한 것을 여기로 꺼내오기.
const localStorageTokenCheck = localStorage.getItem(localId);
  //로컬스토리지의 토큰을 받아온 것. localstorage에 있는 키값과 일치하는 것을 보내면 그 키의 값인 토큰을 받아오는 것이다.

redux에서 로그인 상태를 true로 유지하게 만드는 코드.

useEffect(() => {
    if (localStorageTokenCheck) {
      dispatch({ type: "login", payload: { isLogin: true } });
    }
  }, [dispatch, localStorageTokenCheck]); // useEffect 초기값 정하는 것인데 헷갈림.

---

reducer

reducer에서 토큰을 사용하여 로그인을 유지하는 코드.

const initialLoginState = {
  isLogin: false,
};

type LoginAction = { type: "login"; payload: { isLogin: boolean } };

export const changeLoginStatus = (
  state = initialLoginState,
  action: LoginAction
) => {
  if (action.type === "login") {
    // console.log(state.accessToken);
    return {
      ...state,
      isLogin: action.payload.isLogin,
    };
  } else {
    return state;
  }
};