Nuxt/Auth 모듈 적용하기

Auth 모듈이 나왔다길래 좋다구나 적용하다가 며칠 삽질했다. 간단히 정리하기로 한다.

 

1. yarn add @nuxtjs/auth 명령으로 패키지를 설치한다. 만약 axios가 설치되어 있지 않다면 @nuxtjs/axios도 설치한다.

2. nuxt.config.js 파일에서 modules에 이 패키지들을 추가한다.

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

3. 만약 auth 모듈이 모든 페이지에 기본적으로 적용되길 바란다면, nuxt.config.js 파일의 router에 다음 코드를 넣는다.

router: {
  middleware: ['auth']
}

4. 로그인 요청 또는 사용자 정보 요청을 할 api 주소를 설정한다. axios도 함께 설정해야 할 수도 있다.

  axios: {
    baseURL: 'http://django:8000/',
    browserBaseURL: '/api/',
    credentials: true,
    retry: false
  },

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/token/', method: 'post', propertyName: 'access' },
          user: { url: '/me/', method: 'get', propertyName: false }
        },
      }
    }
  },

auth 모듈 홈페이지나 Nuxt Auth - Authentication and Authorization in NuxtJS를 참고해서 자신의 환경에 맞게 설정한다.

 

5. pages/login.vue 파일을 만들고 로그인 시도 할 때 auth 모듈의 login 함수가 동작하도록 코드를 작성한다. 이 때 중요한 점은 login.vue 페이지는 로그인 하지 않아도 접근할 수 있어야 하는 페이지이지만 auth: false를 설정하면 안 된다!

    참고: 2019/12/05 - [Vue, Nuxt] - nuxtjs/auth module redirect 안 될 때

data () {
  return {
    form: {
      email: '',
      password: ''
    }
  }
},

this.$auth.loginWith('local', {
    data: this.form
})

6. profile.vue 처럼 로그인이 필요한 페이지도 만들어보자. 로그인 하지 않은 상태에서 /profile에 접근했을 때 자동으로 로그인 페이지로 리다이렉팅됐다가, 로그인하면 /profile 페이지로 이동하는지 확인하자.

 

끝.