리액트 JWT 로그인 연장

저번 글에서는 회원가입, 로그인에 대해서만 다루었다.
오늘은 로그인 연장에 대해서 기록하겠다.
서버에서 반환되는 accessToken은 유효기간이 30분이고 refreshToken은 유효기간이 일주일이다. 30분마다 로그인을 하지 않으려면 리프레시토큰을 사용하여 로그인을 자동으로 연장해주어야한다.

서버에서 /reissue api를 제공해주었다.

const onSubmit = (event) => {
    event.preventDefault();
    axios
      .post("/login", {
        loginId: email,
        password: password,
      })
      .then((res) => {
        setLoading(false);
        console.log(res.data);
        localStorage.setItem("accessToken", res.data.accessToken);
        localStorage.setItem("refreshToken", res.data.refreshToken);
        //20분뒤 로그인 연장
        setInterval(onSilentRefresh, 1200000);
        console.log(res.data.accessToken);
        if (res.data.accessToken) {
          navigate("/");
        }
      })
      .catch((Error) => {
        alert("일치하는 회원 정보가 없습니다.");
      });
  };

로그인을 하고 나서 20분 뒤에 onSlientRefresh함수가 실행되도록 하였다.

 const onSilentRefresh = () => {
          axios.post('/reissue', {
            accessToken: localStorage.getItem("accessToken"),
            refreshToken: localStorage.getItem("refreshToken")
          })
              .then((response)=>{
                localStorage.setItem("accessToken",response.data.accessToken);
                localStorage.setItem("refreshToken",response.data.refreshToken);
                //로그인 정상 연장 후 다시 20분 뒤 연장
                setTimeout(onSilentRefresh,1200000);
              })
              .catch(error => {
                  // ... 로그인 실패 처리
              });
      }

onSlientRefresh 함수는 /reissue api에 로컬에 저장해둔 토큰을 전송하여 새로운 토큰을 발급받고 이로 토큰을 갱신하는 함수이다.
토큰을 갱신한 후에는 다시 20분 뒤에 이 함수가 실행되도록 한다.

아 참고로 여기서는 별 차이가 없겠지만 setTimeout과 setInterval의 차이는
setTimeout은 해당 시간 후에 함수를 실행하는 것이고
setInterval은 해당 주기 '마다' 함수를 실행하는 것이다.

_이렇게만 코드를 짰을 때 자꾸 로그인 연장이 잘 되다가 중간에 안되는 상황이 생겼다. 뭐가 문제인지 찾는데 좀 오래 걸렸다. 알고보니 내가 계속 페이지를 새로고침을 했고 그럴 때마다 setTimeout 함수가 실행이 중지되는 것이었다!!!_

하지만 개발을 하면서 새로고침을 안할 수는 없으니 페이지가 새로고침 될 때마다 다시 setTimeout 함수를 호출하도록 코드를 추가했다.

const onSilentRefresh = () => {
    axios.post('/reissue', {
      accessToken: localStorage.getItem("accessToken"),
      refreshToken: localStorage.getItem("refreshToken")
    })
        .then((response)=>{
          localStorage.setItem("accessToken",response.data.accessToken);
          localStorage.setItem("refreshToken",response.data.refreshToken);
          //로그인 연장 후 20분 뒤
          setInterval(onSilentRefresh, 1200000);
        })
        .catch(error => {
            // ... 로그인 실패 처리
        });
}
  if (performance.navigation.type===1){
    //새로고침하면 바로 로그인 연장(토큰 갱신)
    onSilentRefresh();
  }
  

App.js에 onSilentRefresh함수를 다시 생성하고 이를 페이지가 새로고침 될 때마다 호출해주었다. 페이지 새로고침은 performance.navigation.type===1 로 감지할 수 있다.

아무튼 이러한 방법으로 로그인을 한번만 하면 쭉 사용할 수 있어 개발도 편하게 할 수 있었다~!