벌써 세번째 프로젝트를 진행하는데 이번엔 백엔드 개발자분에 맞춰 토큰 기반이 아닌 세션 기반의 로그인을 진행하게 되었다.
이번 기회에 토큰 기반 방식과 세션 기반 방식의 정확한 차이를 이해해보려고 한다.

우선은, 두 방식의 차이점을 알기 전에 인증과 인가가 무엇인지를 알고 있어야 한다.

인증 vs. 인가

인증 Authentication

인증은 클라이언트가 해당하는 사용자인 지를 검증하는 과정이다.
ID와 PW를 통해서 로그인을 하는 과정이 바로 이 인증이라고 할 수 있다.

인가 Authorization

인가는 위의 인증 과정 이후에 수행되는 과정으로서, 해당 사용자의 요청에 대해서 접근 권한을 확인하는 것이다.
A 유저는 웹페이지의 관리자이고 B 유저는 웹페이지의 일반 사용자라고 하였을 때,
인가 과정을 통해서 A 유저는 관리자 페이지에 접속이 가능하지만, B 유저는 접근할 수 없게 된다.

HTTP의 Stateless

HTTP는 비상태성을 갖는다. 서버가 클라이언트의 state를 계속 가지고 유지하는 것이 아니다.
그렇다면 사용자가 요청을 보냈을 때, 인가 과정을 어떻게 거쳐야 하는 것인가!!!
이때 사용하는 것들이 바로 토큰 기반 방식과 세션 기반 방식이다!

Session 방식

방식은 아래의 이미지와 같이 진행된다.
1. 사용자가 로그인을 수행하면
2. 서버는 회원 확인 과정을 거친 뒤에
3. 서버는 세션을 생성하여
4. 세션 ID를 발급받고
5. 사용자에게 응답과 세션 ID를 전달한다.

1. 이후에 사용자가 데이터를 요청하면 (쿠키를 통해서)
2. 서버는 해당 쿠키를 검증하고
3. 사용자 정보를 확인하고
4. 해당 사용자가 권한이 있으면 응답과 요청한 데이터를 전달한다.

Session 기반 axios 코드

import axios, { AxiosInstance } from 'axios';

const axiosInstance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_SERVER_URL,
  withCredentials: true,
});

export default axiosInstance;

Token 방식

방식은 아래의 이미지와 같이 진행된다.
1. 사용자가 로그인을 수행하면
2. 서버는 회원 확인 과정을 거친 뒤에
3. 서버에서 Access Token을 발급하고
4. 사용자에게 응답과 Access Token을 전달한다.

1. 이후에 사용자가 데이터를 요청하면 (Access Token을 통해서)
2. 서버는 해당 Access Token을 검증하고
3. 해당 사용자가 권한이 있으면 응답과 요청한 데이터를 전달한다.

Token 기반 axios 코드

import axios, { AxiosInstance } from 'axios';

const axiosInstance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_SERVER_URL,
  withCredentials: true,
});

axiosInstance.interceptors.request.use(
  async (config) => {
    const accessToken = localStorage.getItem('accessToken');

    if (!accessToken) {
      // 토큰이 없을 경우 로그아웃 처리
      throw new Error('토큰 없음');
    }
	// 헤더에 accessToken value 추가
    config.headers['Authorization'] = `Bearer ${accessToken}`;

    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

export default axiosInstance;