[NuxtJS]Nuxt-Authの基本設定

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

https://auth.nuxtjs.org/

前提条件

  • 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']
  },

...

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

    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などに比べると実装難易度は低めだと思います。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です