[javascript] Nuxt.js에서의 API 인증 방법은?

19 Dec 2023

javascript

Nuxt.js에서 JWT를 사용하여 API를 인증하는 방법은 다음과 같습니다.

Axios Interceptor 설정: Nuxt.js에서 API 요청을 처리하는 Axios에 interceptor를 추가하여 모든 요청에 JWT를 포함시킵니다.

// axios.interceptors.request.use를 사용하여 모든 요청에 JWT를 포함시킴
$axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.common['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

인증 미들웨어 생성: 사용자가 로그인한 경우 JWT를 받아서 로컬 스토리지에 저장하고, 그것을 추출하여 API 요청에 포함시킵니다.

// middleware/auth.js
export default function ({ app, redirect }) {
  const token = localStorage.getItem('token');
  if (!token) {
    return redirect('/login');
  }
}

로그인 페이지 생성: 사용자가 로그인할 때 JWT를 받아와서 로컬 스토리지에 저장합니다.

// pages/login.vue
methods: {
  async login() {
    // 로그인 로직
    localStorage.setItem('token', 'your_jwt_token');
  }
}

이러한 방법으로 Nuxt.js에서 API를 인증하여 안전하게 사용할 수 있습니다.

뿐만 아니라, Nuxt.js에서 auth 모듈을 사용하여 인증을 간편하게 관리할 수도 있습니다. 관련 자세한 내용은 Nuxt.js 공식 문서의 auth 모듈 설명을 참고하시기 바랍니다.