[MySchedule project] 14. 카카오 로그아웃 or unlink 로직

이번 챕터는 카카오와 로그아웃, unlink 로직을 구현할 것이다.
지난 챕터 카카오 로그인(2) - backend에서 토큰과 사용자데이터를 받았는데, 그 토큰을 가지고 로그아웃과 unlink기능을 만들어 보겠다.

 

Frontend

[ src / layout / Header ] - 코드 수정 및 추가 

 

- 지난 챕터에서 kakao Login을 할때는 loginType이 1로 들어가게 처리했고, 데이터를 프론트로 보내 리덕스 스토어에 저장했다.

- loginType을 리덕스에서 가져와서 조건식으로 loginType이 1일 경우에는 다른 로그아웃 함수를 타도록 구현한다.

const loginType = useAddSelector((state) => state.user?.userData?.loginType);

//소셜 로그아웃
  const handleSocialLogout = () => {
    dispatch(socialLogout()).then(() => {
      navigate("/login");
    });
  };

{loginType === 0 && (
  <p className="text-sm font-medium font-sans text-gray-800 dark:text-gray-900 hover:text-gray-600">
    <button onClick={handleLogout}>로그아웃</button>
  </p>
)}
{loginType === 1 && (
  <p className="text-sm font-medium font-sans text-gray-800 dark:text-gray-900 hover:text-gray-600">
    <button onClick={handleSocialLogout}>로그아웃</button>
  </p>
)}

 

[ src / store / thunkFunction.tsx ] - 코드 추가 

//소셜 로그아웃
export const socialLogout = createAsyncThunk(
  "socialLogout",
  async (_, thunkAPI) => {
    try {
      const response = await axiosInstance.post(`/logout/socialLogout`);
      return response.data;
    } catch (error: any) {
      console.log(error);
      return thunkAPI.rejectWithValue(error.response.data || error.message);
    }
  }
);

 

Backend

[ src / routes / logout.js ] - 코드 추가 

 

- axiosInstance에 frontend에서 지정해놓은 토큰을 가져온다.

- 가져온 토큰을 양식에 맞게 보내주기만 하면 로그아웃이 되는데, 여기서 연결 끊기(unlink) 기능을 할 경우에는 사용자 정보 동의체크를 하는 화면이 로그인 할때마다 보이게 된다. 보안이 걱정된다면 로그아웃 버튼 이벤트시에 unlink가 타게 할 수도 있다.

-  둘다 header에 토큰을 보내는 것은 같고, url만 달라지기 때문에 상황에 맞게 사용하면 된다.

url: "https://kapi.kakao.com/v1/user/unlink",
url: "https://kapi.kakao.com/v1/user/logout",

 

//social 로그아웃(카카오)
router.post("/socialLogout", async (req, res, next) => {
  //토큰을 request headers에서 가져오기
  const authHeader = req.headers["authorization"];

  const token = authHeader && authHeader.split(" ")[1];
  console.log(token);

  try {
    const response = await axios({
      method: "POST",
      url: "https://kapi.kakao.com/v1/user/unlink",
      // url: "https://kapi.kakao.com/v1/user/logout",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    console.log("=START==========================");
    console.log(response);
    console.log("=END==========================");
  } catch (error) {
    console.error(error);
  }
  return res.sendStatus(200);
});