리팩토링 : httpOnly를 true로 설정하고 로긴상태 유지하는법 알아냄

사실 내가 알아낸건 아니고 여기저기 물어봐서 하는법을 알게 된거다 

그래도 짜릿짜릿하다.

 

기분이 좋아서 사진을 노을로 했다.

 

내가 썼던 아래글 완전히 틀린것으로 판명났다.!

https://wnsdufdl.tistory.com/251?category=1037375 

리프레시토큰 없이는 쿠키로 로그인상태결정을 못한다(보안포기하면 가능)

---

1. httpOnly:true 설정한다.

else {
        delete data.dataValues.password;
        const accessToken = generateAccessToken(data.dataValues);
        res.cookie("jwt", accessToken, {
          maxAge: 1000 * 60 * 60 * 24 * 7,
          // domain: ".aneun-dongne.com",
          httpOnly: true,
          path: "/",
          secure: true,
          sameSite: "None",
        });
        sendAccessToken(res, accessToken);
      }

 

2. 로그인할때 local의 session storage에 로긴상태를 넣어준다.

local storage가 아닌 session storage를 사용한 이유는 창을 껐을때 데이터가 다 사라지는게 맞다고 생각해서이다.

그런데 또 모바일인거 생각하면 안끄는게 나은건가??

그건 나중에 생각하지 쉽게 바꿀수 있는거니까.

await axios
      .post(
        `${process.env.REACT_APP_API_URL}/user/login`,
        {
          email,
          password,
        },
        { "Content-Type": "application/json", withCredentials: true }
      )
      .then((res) => {
        setAccessToken(res.data.data.accessToken);
        closeLoginModalHandler();
      })
      .then(() => {
        handleResponseSuccess();
        window.sessionStorage.setItem("jwt", "일반로긴");
      })
      .catch(() => {
        setErrorMessage(message.loginError);
      });
  };

2-1. 카카오 로긴떄는 다르게 넣어준다 . - 로그아웃때 카톡 로그아웃과 일반 로그아웃이 다른 기능이기 때문에

 axios
      .get(`${process.env.REACT_APP_API_URL}/user/kakao/callback?code=${code}`, {
        "Content-Type": "application/json",
        withCredentials: true,
      })
      .then((res) => {
        setAccessToken(res.data.data.accessToken);
        window.sessionStorage.setItem("jwt", "카카오로긴");
      })
      .then(() => {
        history.push("/"); // 토큰 받았고 로그인됐으니 화면 전환시켜줌(메인으로)
      })
      .catch((err) => {
        console.log("소셜로그인 에러", err);
        history.push("/"); // 로그인 실패하면 돌려보냄
      });

 

그렇게 되면 local session storage에 다음과 같이 저장된다.

 

이런식으로 하면 개인정보는 전혀 노출되지 않는다.

일반로그인했을떄랑 카카오로긴했을때

3. 로그아웃시에도 local storage에 따라서 onClick을 다르게 설정 한다.

로그아웃 함수에서는 local storage에서 "jwt"를 삭제해준다.

const kakaologoutHandler = () => {
    window.location.assign(
      `https://kauth.kakao.com/oauth/logout?client_id=${process.env.REACT_APP_KAKAO_REST_API_KEY}&logout_redirect_uri=${process.env.REACT_APP_API_URL}/signout`
    );
    setIsLogin(false);
//    로그아웃 함수에서는 sessionStorage에서 "jwt"를 삭제해준다.
    window.sessionStorage.removeItem("jwt");
  };

  const logoutHandler = () => {
    axios.post(`${process.env.REACT_APP_API_URL}/signout`, {}, { withCredentials: true }).then((res) => {
      setIsLogin(false);
      //    로그아웃 함수에서는 sessionStorage에서 "jwt"를 삭제해준다.
      window.sessionStorage.removeItem("jwt");
    });

    history.push("/");
  };
  
  ..(생략)..


{window.sessionStorage.getItem("jwt") === "카카오로긴" ? (
                  <div className="kakao_mainpage-button mainpage-button" onClick={kakaologoutHandler}>
                    Log Out
                  </div>
                ) : (
                  <div className="mainpage-button" onClick={logoutHandler}>
                    Log Out
                  </div>
                )}

 

session storage대신 local storage를 사용한이유 :

session storage는 창을 끄면 다 지워지는데, cookie는 안지워짐

cookie와 생명주기가 맞지 않음.