[NuxtJS]Nuxt-Auth の基本設定

NuxtJS のプロジェクトで nuxt-auth というユーザ認証用のライブラリを使用する際の基本設定をメモしておきます。

nuxt auth docs

 

9 Users

59 Pockets

Introduction

https://auth.nuxtjs.org

Zero-boilerplate authentication support for Nuxt.js!

前提条件

• nuxt : "^2.15.7"
• vue : "^2.6.14"
• @nuxtjs/axios : "^5.13.6"
• @nuxtjs/auth-next : 5.x.x

今回は Nuxt-Auth の5系を使用しますが、4系を使用している場合、ライブラリのインストール方法が異なるので注意が必要です。
それぞれのバージョンのライブラリのインストール方法を記載しておきます。

5系のインストール

$ npm install --save-exact @nuxtjs/auth-next

4系のインストール

$ npm install @nuxtjs/auth

nuxt.config.js の設定

今回は自作のサーバでユーザ認証機能を実装し、そのサーバにアクセスする前提となります。 Google の認証や OAuth を使った認証での設定については本家のドキュメントを確認してもらえればと思います。

export default {

...

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

...

  axios: {
    baseURL: "アクセス先の外部サイトのURL"
  },

  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/',
      callback: false,
      home: '/'
    },
    strategies: {
      local: {
        token: {
          property: 'token取得時のプロパティ名',
          global: true
          // required: true,
          // type: 'Bearer'
        },
        user: {
          property: false
          // autoFetch: true
        },
        endpoints: {
          login: { url: 'auth/login', method: 'post' },
          logout: { url: 'auth/logout', method: 'post' },
          user: { url: 'auth/user/info', method: 'post' }
        }
      }
    }
  },

  router: {
    middleware: ['auth']
  },

...

auth の redirect の設定でログイン、ログアウト、ホーム、ログイン後のコールバック先のパスを設定します。

redirect: {
  login: '/auth/login',
  logout: '/',
  callback: false,
  home: '/'
},

endpoints の設定でログイン時に接続する外部URLとメソッド名、ログアウト時に接続する外部URLとメソッド名、ユーザ情報取得時に接続する外部URLとメソッド名を設定します。
「 user: false 」としてユーザ情報を取得しないようにも設定できます。

endpoints: {
  login: { url: 'auth/login', method: 'post' },
  logout: { url: 'auth/logout', method: 'post' },
  user: { url: 'auth/user/info', method: 'post' }
}

router の設定でこのプロジェクト全体でユーザ認証機能を ON にしています。これでログイン画面以外にはユーザ認証をしていないとアクセスできないようになります。

router: {
  middleware: ['auth']
},

画面によってはユーザ認証なしでアクセスする必要があると思いますが、その場合はそれぞれのページの .vue ファイルに以下のように記載します。

export default {
  auth: false
}

ゲストとして画面にアクセスさせる場合、

export default {
  auth: 'guest'
}

最後に

Nuxt-Auth を導入するたびに設定方法を調べながら実装していましたが、これで多少は調べ物が減ると思います。 NuxtJS のユーザ認証機能は Angular などに比べると実装難易度は低めだと思います。