Nuxt.js를 사용한 프로젝트에서 Auth Module을 사용하여 JWT 인증을 구현했으므로 잊지 말고 함께 둡니다.

흐르는 흐름을 설명하면,

클라이언트 측에서 서버 측으로 이메일 주소와 비밀번호 보내기

서버 측은 토큰을 반환합니다

라는 간단한 것입니다.
서버가 리턴한 토큰은 클라이언트측이 API를 두드릴 때 헤더에 부여하여 사용합니다.

로그인 시 요청 및 응답

클라이언트 측은 api/login에게 다음과 같은 body를 가진 POST 요청을 보내야 합니다.

{
  "email": "[email protected]",
  "password": "password"
}

서버측은 응답으로서 헤더에 부여하기 위한 토큰을 돌려줍니다.

{
  "token": "xxxxxxxxxxxxxx"
}

사용자 정보를 반환하는 API 준비

헤더에 Authorization: Bearer xxxxxxxxxxxxxx를 부여하고 api/me에 GET 요청을 보내서 아래와 같은 사용자 정보를 반환하는 API를 제공합니다 (내용은 예입니다).

{
  "id": 1,
  "name": "tanaka hiroshi",
  "age": "32"
}

Auth Module 소개

Auth Module를 소개합니다.

npm install --save @nuxtjs/auth

Auth Module은 vuex store를 사용하므로 store를 사용하지 않는 경우 store/index.js라는 빈 파일을 만듭니다.

그런 다음 nuxt.config.js에 설정을 추가합니다.

nuxt.config.js

modules: [
  '@nuxtjs/auth'
],

Auth Module 설정하기

nuxt.config.js에 Auth Module 설정을 추가합시다.
설정에 대한 자세한 내용은 이 문서을 확인하십시오.

nuxt.config.js

export default {
  auth: {
    redirect: {
      login: '/login',   // 未ログイン時に認証ルートへアクセスした際のリダイレクトURL
      logout: '/login',  // ログアウト時のリダイレクトURL
      callback: false,   // Oauth認証等で必要となる コールバックルート
      home: '/',         // ログイン後のリダイレクトURL
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: 'api/login', method: 'post', propertyName: 'token' },
          user: { url: 'api/me', method: 'get', propertyName: false},
          logout: false
        },
      }
    }
  },
}

이상으로 설정 완료입니다!

로그인 기능 만들기

샘플로서 아래와 같은 로그인 페이지를 구현합니다.

login 함수의 this.$auth.loginWith('local', { data: this.form }); 부분에서 로그인을 수행합니다.
이렇게 하면 이전nuxt.config.js에서 설정한 api/login와 api/me가 두드려져 헤더에 부여하는 token과 user 정보가 store에 저장됩니다.
그런 다음 로그인 후 페이지로 리디렉션됩니다.
store.$auth.loggedIn 로 로그인하고 있는지 어떤지를 확인할 수 있으므로, middleware에 로그인 판정을 구현해, 로그인 완료되면 로그인 후의 페이지에 리디렉트 하도록(듯이) 하고 있습니다.

또한 store.$auth.getToken('local');에서 헤더에 부여하는 token을 얻을 수 있으므로 axios의 공통 설정 부분에 지정하여 사용할 수도 있습니다.
참고: Nuxt.js에서 axios의 공통 처리를 만들고 API 호출 처리를 래핑하여 사용

pages/login.vue

<template lang="pug">
.login-container
  el-form(:model="form")
    el-form-item(label="メールアドレス")
      el-input(v-model="form.email")
    el-form-item(label="パスワード")
      el-input(v-model="form.password" type="password")
    el-button(type="primary" @click="login") ログイン
</template>

<script>
export default {
  middleware({ store, redirect }) {
    if(store.$auth.loggedIn) {
      redirect('/');
    }
  },
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async login() {
      try {
        const response = await this.$auth.loginWith('local', { data: this.form });
        console.log(response);
      } catch(error) {
        console.log(error);
      }
    }
  }
}
</script>

<style lang="scss">
.login-container {
  margin: 50px auto;
  width: 300px;
  text-align: center;
}
</style>

참고로 nuxt.config.js로 설정한 로그인 후 리디렉션 대상을 home: false로 설정하여 로그인 후 리디렉션 타이밍을 임의로 제어할 수 있습니다.

pages/login.vue

<script>
methods: {
  async login() {
    try {
      const response = await this.$auth.loginWith('local', { data: this.form });
      console.log(response);

      // ここでホームへリダイレクトする前に行いたい処理

      this.$router.replace({ path: '/' }); // 任意のタイミングでリダイレクト
    } catch(error) {
      console.log(error);
    }
  }
}
</script>

로그아웃 기능 만들기

샘플로서 아래와 같은 로그인된 페이지를 구현합니다.

logout 함수의 this.$auth.logout(); 부분에서 로그아웃을 수행합니다.
이렇게 하면 저장소에 저장된 사용자 정보가 삭제되고 로그인 페이지로 리디렉션됩니다.

로그인 페이지와 같이 store.$auth.loggedIn로 로그인하고 있는지 어떤지를 확인해, middleware에 로그인 판정을 구현하고 있습니다.
로그인하지 않은 경우 로그인 페이지로 리디렉션합니다.
this.$auth.user에서 사용자 정보를 얻을 수도 있습니다.

index.vue

<template lang="pug">
.container
  p 名前：{{ user.name }}
  p 年齢：{{ user.age }} 歳
  el-button.button(type="primary" @click="logout") ログアウト
</template>

<script>
export default {
  middleware({ store, redirect }) {
    if(!store.$auth.loggedIn) {
      redirect('/login');
    }
  },
  computed: {
    user() {
      return this.$auth.user;
    }
  },
  methods: {
    logout() {
      this.$auth.logout();
    },
  }
}
</script>

<style lang="scss">
.container {
  margin: 50px auto;
  width: 300px;
  text-align: center;

  .button {
    margin-top: 30px;
  }
}
</style>

이상으로 구현 완료입니다.
간단하게 로그인/로그아웃 처리를 구현할 수 있으므로, 매우 추천입니다!