[React] JWT 토큰과 localStorage 로그인

 

앞에서 JWT 토큰을 발급하는 방법을 살펴보았다.

여기서는 발급받은 JWT 토큰을 리액트에서 활용하는 방법을 작성해 보려고 한다.

사실 쿠키를 사용하여 구현하려고 했지만, 구현이 생각처럼 잘 되지 않아 localStorage로 일단 구현하였다.

 

---

 

✔ login.js

onst loginProcess = async () => {
    const body = {
        id,
        password,
    };

    const {response, data} = await postFetch('/api/admin/login',body);
    if (response.status === 200) {
        const result = data[0];
        localStorage.setItem("accessToken", result.acc_tkn);
        localStorage.setItem("refreshToken", result.ref_tkn);

        if(result.status === 401){
            printMsg(result.msg);
        }else if(result.status === 402){
            printMsg(result.msg);
        }else{
            navigate('/admin/user/userList');
        }
    }else{
        printMsg("시스템에 문제가 생겼습니다");
    }

}

• /api/admin/login으로 Request를 보내고 토큰을 발급받는다. 그리고 토큰을 localStorage에 저장해 주었다.
  • refresh_token
  • access_token

 

 

✔ userList.js

useEffect(() => {
    userListCall()
}, []);

const userListCall = async () => {

    const { response, data } = await postFetch('/api/admin/userList');

    if (response.status === 200) {
        setUserList(data);
    }
}

 

✔ common.js - postFetch

export const postFetch = async (url, sendData, config = {}) => {
    let accToken = localStorage.getItem("accessToken");

    const requestOptions = {
        headers: { "content-type": "application/json",
            "authorization": accToken},
        method: "POST",
        body: JSON.stringify(sendData)
    }

    let { response, data } = await commonRequest(url, requestOptions)

    if (response.status === 403) {
        let ref_token = localStorage.getItem("refreshToken");

        accToken = await refreshToken(ref_token);

        if(accToken == null) {
            alert('로그인 후 사용해주세요.');
            window.location.replace("/admin");
            return;
        }

        const requestOptions = {
            headers: { "content-type": "application/json",
                "authorization": accToken},
            method: "POST",
            body: JSON.stringify(sendData)
        }

        let newResponse = await commonRequest(url, requestOptions)
        response = newResponse.response
        data = newResponse.data
    }

    return { response, data }
}

1. 먼저 localStorage에 저장된 accessToken을 헤더에 담아서 Requset를 보내고 유효하지 않거나 토큰이 만료되었다면 403 에러를 받는다.
2. 그러면 localStorage에 저장된 refreshToken을 다시 헤더에 담아서 Request를 보내고 accessToken을 재발급받는다.
3. /api/admin/userList로 요청을 보내어 토큰을 검증하고 다음 로직을 수행한다.
4. refreshToken 조차 유효하지 않으면, accessToken 재발급이 안되고 다시 로그인 페이지로 redirect 시킨다. 

 

▶ await refreshToken(ref_token) - 위 2번 내용

async function refreshToken(ref_token) {
    const requestOptions = {
        headers: { "content-type": "application/json",
            "ref_authorization": ref_token},
        method: "POST",
    }

    let response = await fetch('/api/admin/token/refresh', requestOptions);
    let data = await response.json();
    if(response.status === 200){
        localStorage.setItem('accessToken', data.acc_token)
        if(data.ref_token) {
            localStorage.setItem('refreshToken', data.ref_token)
        }
        return data.acc_token;
    }
}

 

※ Back -end 부분 참고

2022.08.03 - [Java Script] - [node.js] 로그인 시 JWT 토큰 발급 & JWT 미들웨어 설정 (토큰 검증)

[node.js] 로그인 시 JWT 토큰 발급 & JWT 미들웨어 설정 (토큰 검증)

 

 

 

✔ userList.js

<div className="sectionLine">
    <div className="brdBtn">
        <h3>회원 목록</h3>
        <div className="btn-right">
            <a href="#" className="btn btn-del" id="secsnMber" style={{marginRight : "5px"}}>탈퇴</a>
            <a href="#" className="btn btn-excel excelBtn" id="excelDown">다운로드</a>
        </div>
    </div>
    <div className="ag-theme-alpine" style={{height: "450px", width: "100%"}}>
        <AgGridReact
            rowData={userList}
            columnDefs={columnDefs}
            pagination={pagination}
            paginationPageSize={paginationPageSize}
            paginationAutoPageSize={paginationAutoPageSize}>
        </AgGridReact>
    </div>
</div>

• 해당결과값을 AgGrid를 이용해서 프론트에 표출