[Node.js] 새로고침 시 로그인 유지

 

express 서버로 사용자 로그인을 구현했지만

새로고침 시에 로그인이 풀리는 현상이 발생한다.

 

로그인 자체가 해제된 것 처럼 보이지만

개발자 도구의 Cookie를 확인해보면 connect.sid에

passport와 express에서 만든 session id 값이 들어있는 것을 확인할 수 있다.

 

새로고침을 할 때마다 쿠키를 서버에 전송하고

로그인 한 유저의 정보를 서버에 요청을 하여

정보를 받아오는 방법을 사용할 수 있다.

 

[ router ]

router.get("/", async (req, res, next) => {
  try {
    if (req.user) {
      // 로그아웃 한 상태라도 요청을 보내기 때문에 체크해 준다.
      const user = await User.findOne({
        where: { id: req.user.id },
      });
      res.status(200).json(user);
    } else {
      res.status(200).json(null);
    }
  } catch (error) {
    console.error(error);
    next(error);
  }
});

새로고침을 할 때마다 요청을 보낼 것인데

로그인과 관계없이 모든 요청을 보내기 때문에 서버측에서 확인을 해주어야 한다.

 

기본 로그인 세팅은 위와 같지만 브라우저로 보낼 데이터를 

정리해서 보내준다.

router.get("/", async (req, res, next) => {
  try {
    if (req.user) {
      // 로그아웃 한 상태라도 요청을 보내기 때문에 체크해 준다.
      const userData = await User.findOne({
        where: { id: req.user.id },
        attributes: {
          exclude: ["password"], //  password 제외
        },
        include: [
          // 추가로 포함시킬 데이터
          { model: db.Post, attributes: ["id"] },
        ],
      });
      res.status(200).json(userData);
    } else {
      res.status(200).json(null);
    }
  } catch (error) {
    console.error(error);
    next(error);
  }
});

 

router에 작성한 내용에 맞게 브라우저에서 get요청을 하는 코드를 작성해주면 된다.

 

[sagas/user.js]

function loadUserInfoAPI() {
  // Get 요청으로 쿠키를 전달하는 것이기 때문에 데이터 전달 X
  return axios.get("/user", {
    withCredentials: true,
  });
}

function* loadUserInfo(action) {
  try {
    const result = yield call(loadUserInfoAPI, action.data);
    yield put({
      type: LOAD_USER_INFO_SUCCESS,
      data: result.data,
    });
  } catch (error) {
    yield put({
      type: LOAD_USER_INFO_FAILURE,
      error: error.response.data,
    });
  }
}

function* watchLoadUserInfo() {
  yield takeLatest(LOAD_USER_INFO_REQUERST, loadUserInfo);
}

get요청에 쿠키를 함께 보냄으로써 로그인한 유저의 정보를 받아올 수 있다.

쿠키 허용을 위해 withCredentials를 true로 설정해서 보내야 한다.

(* 서버에서도 쿠키 허용이 되어있어야 함.)

 

 

  useEffect(() => {
    dispatch({
      // 새로고침할 때마다 로그인 정보 요청
      type: LOAD_USER_INFO_REQUERST,
    });
  }, []);

최상위 컴포넌트에 useEffect를 사용하여 페이지가 변경될 때마다

해당 요청을 할 수 있도록 코드를 작성한다.