drf simple_jwt refresh token활용

초보자가 나름대로 공부한 내용을 적은 것임으로 고칠부분을 말씀해주시는 것은 언제나 환영입니다.

저번 til에 이어 이번에는 refresh 토큰을 어떻게 활용하는 가에 대해서 다뤄보려고 한다.

우선 SIMPLE_JWT에 다음과 같이 라이프 타임을 명시해준다. 저번 포스트에서는 억세스 토큰의 기간을 하루로 해 놓았었는데 억세스토큰 만료 기간이 길어지는 것을 권하지 않는다고 한다. 당연히 억세스토큰을 가지고 있는 기간이 길어지면 해킹의 위험도가 높아지기 때문이라고 생각한다. 여기서 refresh토큰이 필요해진다.

내가 이해한 바대로 정리해보면 refresh토큰은 만료기간까지 새로운 억세스 토큰을 받는 것이 가능하고 그 덕에 엑세스 토큰의 기간은 짧게 가져가면서 충분한 로그인시간을 확보할 수 있게 된다.

'ACCESS_TOKEN_LIFETIME': datetime.timedelta(minutes=5),
'REFRESH_TOKEN_LIFETIME': datetime.timedelta(days=30),
'ROTATE_REFRESH_TOKENS': True,
'BLACKLIST_AFTER_ROTATION': True,

저번에 길게 설정해두었던 억세스 토큰을 5분 정도로 짧게 설정해두고 rotate_refresh_tokens을 True로 바꿔주고 로테이션 이후에 다시 또 사용이 가능한 일이 없게 blacklist_after_rotation을 True로 바꿔준다.

async function refresh() {
    url = new URL(BASE_URL + '/api/token/refresh/');
    const result = await fetch(url, {
        method: 'POST',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken,
            "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify({ 'refresh': localStorage.getItem('refresh') })
    })
    let data = await result.json()
    if (result.ok) {
        for (const key in data) {
            localStorage.setItem(key, data[key])
        }
    } else {
        logout()
    }
}

새로운 토큰들을 발급해주는 api에 새로운 토큰을 발급받는 함수를 만들어준다. 만약 status 200 코드가 오지 않는다면 아래의 로그아웃 함수를 실행시키도록 해주었다.

function logout() {
    localStorage.clear();
    location.replace('/user/sign_in.html')
}

마지막으로 setinterval을 통해서 5분마다 한번씩 refresh함수를 불러와주면 내가 페이지를 켜고 있는 동안은 리프레시 함수가 계속해서 토큰을 업데이트 해준다.

let interval_time = 60 * 5 * 1000
let refresh_interval = setInterval(() => {
    if (localStorage.getItem('access')) {
        refresh();
    }
}, interval_time);

물론 이 로직은 문제가 많다. setinterval이 계속 쌓이게 될 수도 있고 logout의 실행조건이 fetch를 실패할 때 여서 명확해 보이지도 않아보인다. 부족한 부분은 앞으로 공부를 통해서 더 메꿔나가야겠다.