[ Intro ] 로그인 및 회원가입 + 토큰 과정

[Happhee]

🔥 Related Issues

• close #43

🎡 작업 내용

• [x] 토큰 header로 넣어주기
• [x] 로그인 / 회원가입 페이지 만들기
• [x] msw 테스트 진행하기

✅ PR Point

• core/axios.ts 👇 baseInstance.interceptors를 사용해서 토큰의 유효성 검사를 요청때마다 진행하였습니다✨

  
  import axios from 'axios';
  import LocalStorage from './localStorage';
  // const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

const baseInstance = axios.create({ baseURL: /, headers: { 'Content-Type': 'application/json', }, }); // // client side base instance (default) // // 로컬스토리지 접근이 가능하고 token이 필요한 api 호출에서 사용 baseInstance.interceptors.request.use((config) => { const headers = { ...config.headers, accessToken: LocalStorage.getItem('accessToken'), refreshToken: LocalStorage.getItem('refreshToken'), };

return { ...config, headers }; });

baseInstance.interceptors.response.use((response) => { if (response.data) return response.data;

async (error: { config: any; response: { status: any } }) => { const { config, response: { status }, } = error;

const originalRequest = config;
console.log(originalRequest);
if (status === 409) {
  // token refresh 요청
  const { data } = await axios.post(
    `/auth/refresh`, // token refresh api
    {},
    {
      headers: {
        accessToken: LocalStorage.getItem('accessToken'),
        refreshToken: LocalStorage.getItem('refreshToken'),
      },
    },
  );

  const accessToken = data.data.accessToken;
  const refreshToken = data.data.refreshToken;

  LocalStorage.setItem('accessToken', accessToken);
  LocalStorage.setItem('refreshToken', refreshToken);

  originalRequest.headers = {
    accessToken: accessToken,
    refreshToken: refreshToken,
  };
  return axios(originalRequest);
}
return Promise.reject(error);

}; }); export { baseInstance };

- core/localStroage.ts
 👇 ``LocalStorage``를 클래스로 생성하여 토큰을 저장합니다✨
```typescript
class LocalStorage {
  constructor() {}

  static setItem(key: string, item: string) {
    if (typeof window !== 'undefined') {
      localStorage.setItem(key, item);
    }
  }

  static getItem(key: string) {
    if (typeof window !== 'undefined') {
      return localStorage.getItem(key) as string;
    }

    return '';
  }

  static removeItem(key: string) {
    if (typeof window !== 'undefined') {
      localStorage.removeItem(key);
    }
  }

  static setUserSession(
    accessToken: string,
    refreshToken: string,
    email: string,
  ) {
    this.setItem('accessToken', accessToken);
    this.setItem('refreshToken', refreshToken);
    this.setItem('email', email);
  }

  static clearUserSession() {
    this.removeItem('accessToken');
    this.removeItem('refreshToken');
    this.removeItem('email');
  }
}

export default LocalStorage;

👀 스크린샷 / GIF / 링크

📚 Reference

• [Axios 러닝 가이드](https://yamoo9.github.io/axios/)
• axios interceptor을 이용한 토큰 처리

[say-young516]

core/localStroage.ts 로 로컬스토리지 클래스를 만든 이유가 타입땜에 그런 건가여,,? localStorage.getItem('ㅇㅇ); 요런식으로 적기 싫어서 그런줄 알았는데 그건 아닌 것 같길래욤

[say-young516]

수고했읍니다!! 로그인 로직자체는 항상 어려워했어서 이번에 코드 보면서 좀 공부중,, 의문 드는 거 있음 물어보께!

[Happhee]

@say-young516
core/localStroage.ts 로 로컬스토리지 클래스를 만든 이유가 타입땜에 그런 건가여,,? localStorage.getItem('ㅇㅇ); 요런식으로 적기 싫어서 그런줄 알았는데 그건 아닌 것 같길래욤

next가 ssr 구조라 localStorage 를 사용할때 아래처럼 window이걸 검증을 계속해줘야해서..! 페이지마다 하는게 귀찮을것같아서 아예 class로 뺏습니ㅏㄷ!

if (typeof window !== 'undefined') {
      localStorage.setItem(key, item);
    }