토큰을 통한 정보 추출

HTTP는 stateless이기에 화면을 이동하며 새로운 API를 요청하면 다시 신뢰할만한 사용자인지 인증하는 과정이 필요하다.

-> 인증된 사용자가 어느 정도 기간동안 재인증 하지 않아도 되도록(로그인이 유지되도록) 만든 것이 Access Token이다.

 

Access Token

• 클라이언트가 갖고있는 실제로 유저의 정보가 담긴 토큰으로, 클라이언트에서 요청이 오면 서버에서 해당 토큰에 있는 정보를 활용하여 사용자 정보에 맞게 응답을 진행한다.
• 인증된 사용자가 서버에 접근할 수 있도록 허용하는 짧은 유효 기간을 가진 토큰

Access token 을 이용해서 유저 관련 정보들을 추출해낼 수 있는데

난 토큰 만료 여부를 확인하는 함수(isAuth)와 access token으로부터 user의 id와 nickname을 추출해내는 함수를 구현하는 과정이 필요했다

 

<Access token 유효성 검사>

import jwt_decode from "jwt-decode";

import { fetchUserInfo } from "../lib/api.js";

export class jwtUtils {
  // 토큰 유효성 검사
  static isAuth(token) {
    if (!token) {
      return false;
    }
    const decoded = jwt_decode(token);
    if (decoded.exp > new Date().getTime() / 1000) {
      return true;
    } else {
      return false; 
    }
  }

-> 토큰이 없다면 즉시 false를 return 한다. jwtDecode 함수를 사용하여 토큰을 디코드하면 토큰의 payload가 해석된다.

토큰을 decode시, 위의 정보들이 추출된다.

이때 exp 필드가 토큰의 만료시간을 나타내므로 얘를 이용해서 토큰 만료 여부를 확인할 수 있다.

-> 현재 시간을 초 단위로 계산하고, exp 필드의 값과 비교하여 현재 시간이 만료 시간보다 작으면 토큰이 아직 유효한 것으로 간주하고 true를 반환하게 한다. 그렇지 않으면 false를 반환하도록 한다.

 

Navbar에 이를 이용해서 토큰 만료상태면 로그인 버튼이, 유효 상태면 마이페이지 버튼이 뜨도록 했다

const Navbar = () => {
  const token = store.getState().Auth.token;
  const isLoggedIn = jwtUtils.isAuth(token);

-> 로그인 후 저장된 token을 store에서 가져오고 이 token의 유효성 검사를 isAuth를 통해 진행

-> 삼항연산자를 이용해 버튼을 조건부 랜더링 하기! isLoggedIn?(마이페이지 버튼):(로그인 버튼)

{isLoggedIn ? (
            <div className="ProfileButton" onClick={navigateToMyPage}>
              <PersonIcon/>
            </div>
          ) : (
            <div className="LoginButton">
              <Button>
                로그인
              </Button>
            </div>
          )}

---

< user의 id 추출해내기>

 

<api.js>

export const fetchUserInfo = async (token) => {
  try {
    const response = await client.get(`/accounts/update`);
    return response.data;
  } catch (error) {
    throw error;
  }
};

 

<jwtUtils.js>

// 토큰에서 유저 id 가져오기
  static getId(token) {
    const decoded = jwt_decode(token);
    return decoded.user_id;
  }

 

-> 아까 decode한 토큰에서 user_id를 추출해낼 수 있다는 걸 알아냈으므로 decode된 토큰을 통해서 user id를 받아올 수 있다