react-cookie 를 활용한 로그인,로그아웃(json-server-auth로 test)

로그인 →

1. 우선 리액트-쿠키를 설치

npm i react-cookie

그리고 app.js 나 index.js 에서 CookiesProvider 로 감싸준다.

import { CookiesProvider } from 'react-cookie';

export default function Root() {
  return (
    <CookiesProvider>
      <App />
    </CookiesProvider>
  );
}

1. 로그인 폼에다가 셋팅

*import* { useCookies } *from* "react-cookie";

export default function LoginForm() {
	const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);

...
}

• cookies : 쿠키 가져오는 것
• setCookie : 말그대로 쿠키 설정
• removeCookie : 쿠키 제거

 

useCookies([’사용 할 쿠키이름’]) 을 넣어준다.

1. axios 와 json-server-auth 를 활용하여 로그인 테스트

*import* { useCookies } *from* "react-cookie";

export default function LoginForm() {
	const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);

...

const onSubmit = async (e) => {
    e.preventDefault();

      //! 로그인 POST
      return await axios
        .post("<http://localhost:8080/login>", {
          email,
          password,
        })
        .then((res) => {
          // console.log(res.data.accessToken);

          //? { path: "/" } 전역에 쿠키 사용
          setCookie("accessToken", res.data.accessToken, { path: "/" });
          
          // redux isLogin 상태
          dispatch({ type: "USER_ISLOGIN" })
          navigate("/");
        })
        .catch((error) => {
          console.log(error);
          alert("로그인 실패..!");
        });

  };
}

json-server-auth 는 설정 된 값이,

email과 password 만 받아서 /login 에 두개만 보냈다.

 

setCookie("accessToken", res.data.accessToken, { path: "/" });

setCookie(”쿠키의 key 값 이름”, 실제 값(여기선 토큰 값), 옵션)

이렇게 넣어 주었다.

 

자세한 옵션은 아래 링크에 있는 사이트에서 확인해서 골라서 사용하면 될 것 같다.

우선 로그인 성공에 우선은 두는 가정하에 적용했다.

 

{ path: "/" } 를 옵션에 넣어줘야 지금 사용하는 웹페이지 전역에서 사용할 수 있다고 한다.

 

이렇게 로그인버튼을 눌려 요청을 보내면

accessToken 이라는 이름을 가진 쿠키가 들어온 걸 확인 할 수 있다.

이렇게 되면 로그인 성공~👏🏻

 

 

 

로그아웃 →

1. 로그인과 같이 useCookies()를 불러와준다.

const [cookies, setCookie, removeCookie] = useCookies(["accessToken"]);

1. removeCookie(’accessToken’) 을 사용하면 쿠키를 지워 준다고 했다. 하지만 지워 지지가 않았다.

    //! 쿠키제거
     removeCookie("accessToken", {
       path: "/",
       domain: "<http://localhost:3000/>",
     });

위와 같은 방법으로

removeCookie 의 옵션에 path 도 넣어 보았고, domain 도 적용 해봐라~~

해서 했지만 작동하지 않았다.

아직도 정확한 이유는 모르겠지만, 스택오버플로우 에서 대책을 찾다가 넘어온 링크이다.

reactCookie.remove not functioning. · Issue #16 · reactivestack/cookies

 

여기서

setCookie 를 다시 추가 하면 된다?? 에 의문을 갖고!

 

여기서 로그아웃 버튼을 누르면 완전히 accessToken 이라는 이름을 가진 쿠키가 사라지진 않지만

쿠키안에 들어있는 토큰의 값을 변경 할 수 있지 않을까?? 라는 생각 이었다.

const [cookies, setCookie, removeCookie] = useCookies(["accessToken"]);

export default function LogoutModal({ setModalOpen }) {
...

  const logoutHandle = () => {

    setCookie("accessToken", "tokenXX", { path: "/" });
    // redux 로그인 상태변경
    dispatch({ type: "USER_ISLOGOUT" });

    alert("성공적으로 로그아웃 했습니다.");
    navigate("/login");

    window.location.reload();
  };

...
}

이렇게 가운데 실제 값이 들어가는 곳에 “tokenXX”라고 한 뒤 눌러보았다.

setCookie("accessToken", "tokenXX", { path: "/" });

 

 

코드의 순서대로 로그아웃 알림이 뜬 뒤에 확인을 누르면→ 토큰이 그대로 있었기 때문에

window.location.reload();

리로드를 해주었더니, 로그인 창으로 리다이렉트 하며 토큰 값도 설정한 “tokenXX” 로 변경 되었다.

 

 

이렇게 되면 로그아웃 성공~~🙌🏻

 

 

 

 

자세한 옵션과 설명은 아래 사이트를 참조하면 된다.

react-cookie

 

React react-cookie