프론트엔드에서 새로고침 시 로그인 상태유지가 되지 않는 문제 해결하기

사용자 인증 기능을 구현하면서 가장 고민했던 문제 중 하나는, 프론트엔드에서 페이지를 새로고침하였을 때 로그인 상태가 유지되지 않는 이슈였다. 세션을 이용해 서버에서는 로그인과 로그아웃이 정상적으로 이루어졌지만, 프론트엔드에서는 새로고침을 하면 사용자의 로그인 상태가 초기화되는 문제가 있었는데, 이 문제를 어떻게 해결하였는지 알아 보도록하자.

1. 문제 상황

Next.js와 Express를 이용하여 개발을 진행하던 중, 사용자의 로그인 상태를 세션에 저장하였다. 서버에서 로그인과 로그아웃이 정상적으로 작동하였지만, 프론트엔드에서 페이지를 새로고침하면 로그인 상태가 초기화되는 문제가 발생하였다.

2. 문제 원인

프론트엔드에서 페이지를 새로고침하면, React 컴포넌트는 초기 상태로 다시 렌더링되는데, 이 때 로그인 상태가 Redux 스토어에 저장되어 있다면 이 정보도 초기화되어 버리므로 사용자의 로그인 상태가 사라지게 된다.

로그인 상태를 관리하는 Redux 스토어의 초기 상태는 다음과 같다.

// src/store/authSlice.js

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    isLoggedIn: false,
    user: null,
  },
  // ...
});

문제 해결

해당 문제를 해결하기 위해, 페이지를 새로고침할 때마다 서버에 로그인 상태를 체크하는 요청을 보냈다. 이렇게 하면, 페이지를 새로고침할 때마다 서버에서 현재 사용자의 로그인 상태를 받아와서 프론트엔드의 상태를 업데이트할 수 있다.

먼저, 로그인 상태를 체크하는 API를 만든다.

// controllers/authController.js

exports.checkLoginStatus = (req, res, next) => {
  if (req.session && req.session.user) {
    res.status(200).json({
      message: "로그인 상태 입니다.",
      user: req.session.user,
    });
  } else {
    res.status(401).json({ message: "로그아웃 상태 입니다." });
  }
};

그리고 이 API를 호출하는 함수를 작성한다.

// src/api/auth.js

export const checkUserLoginStatus = async () => {
  try {
    const response = await axiosInstance.get('/auth/check-login-status');
    return response;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

마지막으로, 프론트엔드에서 페이지가 렌더링될 때마다 로그인 상태를 체크하는 로직을 _app.jsx에 추가한다. 이때, login과 logout은 Redux 스토어에서 사용자의 로그인 상태를 변경하는 액션이다.

// src/pages/_app.jsx

const App = ({ Component, pageProps }) => {
  // ...
  const checkLoginStatus = async () => {
    try {
      const response = await checkUserLoginStatus();
      if (response.status === 200) {
        dispatch(login(response.data.user));
      } else {
        dispatch(logout());
      }
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    checkLoginStatus();
  }, []);

  // ...
};

export default wrapper.withRedux(App);

이렇게 하면, 페이지를 새로고침하였을 때마다 서버에 로그인 상태 체크 요청을 보내서, 서버의 응답에 따라 프론트엔드의 로그인 상태를 업데이트하게 된다. 이렇게 하여, 새로고침에도 로그인 상태를 유지할 수 있었다.

배운점

이 트러블슈팅 경험을 통해, 페이지를 새로고침하였을 때 프론트엔드의 상태가 초기화되는 문제를 해결하는 방법을 배웠다.