[react-auth-example] 2. 프론트엔드

프론트엔드 깃허브 링크

로컬 스토리지, 세션 스토리지, 쿠키의 차이점을 알기 쉽게 페이지 및 API를 따로 구현했다.

API 요청 - 로그인

웹 스토리지

type LoginResponse = {
   id: string;
   token: string;
};

export const login = async (id: string, password: string): Promise<LoginResponse> => {
   var myHeaders = new Headers();
   myHeaders.append('Content-Type', 'application/json');

   const user = { id, password };

   return await (
      await fetch('http://localhost:4000/auth/login', {
         method: 'POST',
         body: JSON.stringify(user),
         headers: myHeaders,
      })
   ).json();
};
type LoginResponse = {
   id: string;
   token: string;
};

export const login = async (id: string, password: string): Promise<LoginResponse> => {
   var myHeaders = new Headers();
   myHeaders.append('Content-Type', 'application/json');

   const user = { id, password };

   return await (
      await fetch('http://localhost:4000/auth/login', {
         method: 'POST',
         body: JSON.stringify(user),
         headers: myHeaders,
      })
   ).json();
};

쿠키

프론트엔드에서 fetch 요청 시 옵션으로 credentials: "include"를 하고, 백엔드에서 cors 설정 및 res.cookie의 옵션으로 sameSite: "strict"를 해야 서버에서 브라우저에 다이렉트로 쿠키를 저장시킬 수 있다. (주의: 서버와 클라이언트의 도메인이 다르면 크로스 사이트 에러가 발생한다.)

type LoginResponse = {
   id: string;
   token: string;
};

export const cookieLogin = async (id: string, password: string): Promise<LoginResponse> => {
   var myHeaders = new Headers();
   myHeaders.append('Content-Type', 'application/json');

   const user = { id, password };

   return await (
      await fetch('http://localhost:4000/auth/login?cookie=true', {
         method: 'POST',
         body: JSON.stringify(user),
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};
type LoginResponse = {
   id: string;
   token: string;
};

export const cookieLogin = async (id: string, password: string): Promise<LoginResponse> => {
   var myHeaders = new Headers();
   myHeaders.append('Content-Type', 'application/json');

   const user = { id, password };

   return await (
      await fetch('http://localhost:4000/auth/login?cookie=true', {
         method: 'POST',
         body: JSON.stringify(user),
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};

API 요청 - 보호된 페이지 접근

웹스토리지

서버에서 직접 접근할 수 없으므로 직접 헤더에 Autorization: Bearer ${token}의 형태로 추가한다.

type verifyResponse = {
   authenticated: boolean;
   message: string;
};

export const verifyWithLocalStorage = async (): Promise<verifyResponse> => {
   const token = localStorage.getItem('token');

   if (!token) return { authenticated: false, message: '토큰이 없습니다.' };

   var myHeaders = new Headers();
   myHeaders.append('Authorization', `Bearer ${token}`);

   return await (
      await fetch('http://localhost:4000/dashboard', {
         method: 'GET',
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};
type verifyResponse = {
   authenticated: boolean;
   message: string;
};

export const verifyWithLocalStorage = async (): Promise<verifyResponse> => {
   const token = localStorage.getItem('token');

   if (!token) return { authenticated: false, message: '토큰이 없습니다.' };

   var myHeaders = new Headers();
   myHeaders.append('Authorization', `Bearer ${token}`);

   return await (
      await fetch('http://localhost:4000/dashboard', {
         method: 'GET',
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};

type verifyResponse = {
   authenticated: boolean;
   message: string;
};

export const verifyWithSessionStorage = async (): Promise<verifyResponse> => {
   const token = sessionStorage.getItem('token');

   if (!token) return { authenticated: false, message: '토큰이 없습니다.' };

   var myHeaders = new Headers();
   myHeaders.append('Authorization', `Bearer ${token}`);

   return await (
      await fetch('http://localhost:4000/dashboard', {
         method: 'GET',
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};
type verifyResponse = {
   authenticated: boolean;
   message: string;
};

export const verifyWithSessionStorage = async (): Promise<verifyResponse> => {
   const token = sessionStorage.getItem('token');

   if (!token) return { authenticated: false, message: '토큰이 없습니다.' };

   var myHeaders = new Headers();
   myHeaders.append('Authorization', `Bearer ${token}`);

   return await (
      await fetch('http://localhost:4000/dashboard', {
         method: 'GET',
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};

쿠키

쿠키는 request시 자동으로 header에 포함되기 때문에 따로 설정하지 않아도 된다.

type verifyResponse = {
   authenticated: boolean;
   message: string;
};

export const verifyWithCookie = async (): Promise<verifyResponse> => {
   var myHeaders = new Headers();
   myHeaders.append('Content-Type', 'application/json');

   return await (
      await fetch('http://localhost:4000/dashboard?cookie=true', {
         method: 'GET',
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};
type verifyResponse = {
   authenticated: boolean;
   message: string;
};

export const verifyWithCookie = async (): Promise<verifyResponse> => {
   var myHeaders = new Headers();
   myHeaders.append('Content-Type', 'application/json');

   return await (
      await fetch('http://localhost:4000/dashboard?cookie=true', {
         method: 'GET',
         headers: myHeaders,
         credentials: 'include',
      })
   ).json();
};