猿でも分かる!! Nuxt.jsのauthモジュール

対象読者

• Nuxt.jsでログイン認証機能を実装したい人
• authモジュール???って人
• auth使いたいけど使い方がわからない人

筆者自身初心者なので初心者の方にもわかりやすく書いていくつもりです。そのためミス等あるかもしれません。その際はコメントで教えていただけると嬉しいです。

authモジュールって??

authモジュールはNuxt.jsで利用できる認証モジュールのことです。authを使うことによって非常に簡単にログイン・ログアウト等の機能を実装できます。

実装

セットアップ

まずはauthをインストールするところから始めます。
使いたいプロジェクトディレクトリで
npm install @nuxtjs/auth @nuxtjs/axios

次にnuxt.config.jsを次のように編集します。

nuxt.config.js

...,

modules: [
  //authの認証でaxiosを使ってサーバーとやり取りするためaxiosも追加しておく
  '@nuxtjs/axios',
  '@nuxtjs/auth'
],

auth: {
  // ここにauthの設定を書いていく
}

さて、上記のauth: の部分ですが、ここには認証のロジックを書いていきます。

nuxt.config.js

auth: {
  //strategiesの中身に認証ロジックを書いていく
  strategies: {
    //localという認証方法を使う場合
    local: {
      //axiosでアクセスする際の設定
      endpoints: {
        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
        logout: { url: '/api/auth/logout', method: 'post' },
        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
      }
    }
  }
}

**んーよくわからないですよね。**この先で一つずつ説明していきます。適宜上のソースコードを見返しながら読んでいただくとわかりやすいかと思います！

strategies:

strategies: {
    //localという認証方法を使う場合
    local: {
      //axiosでアクセスする際の設定
      endpoints: {
        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
        logout: { url: '/api/auth/logout', method: 'post' },
        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
      }
    }
  }

今回はlocalというログイン方法を採用していますが、これはよくある
「emailアドレスとパスワードを入力してログインする」方法です。

他の方法としてはgoogleアカウントを利用してログインするなどがあり、これを使うには以下のように書きますが、この記事ではこれ以上は触れないこととします。（まず筆者が使ったことない）

nuxt.config.js

auth: {
  strategies: {
    google: {
          client_id: '...'
    }
  }
}

local:

local: {
  //axiosでアクセスする際の設定
  endpoints: {
    login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
    logout: { url: '/api/auth/logout', method: 'post' },
    user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
  }
}

これはlocalという認証方法を使うときに書く必要があります。
endpointsはaxiosが認証アクセスを行う時の設定です。

endpoints:

endpoints: {
    login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
    logout: { url: '/api/auth/logout', method: 'post' },
    user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
}

axiosがログイン等でアクセスする時の設定を書きます。login:の中身を説明すると、次のようになります。

login: {
  url: 'ログインするときにアクセスするurl', method: 'post', propertyName: 'サーバーから帰ってくるトークンの名前'
}

なんと、これだけでもう基本的な設定は完了です！！とても簡単ですね。

使ってみる

以上のセットアップのおかげでどこのコンポーネント内でも
this.$auth.~~~が使えるようになりました。
いくつか紹介すると、

• this.$auth.loggedIn : ログイン済みかどうかがtrue/falseで返ってくる
• this.$auth.user : ログイン済みのユーザーを返す
• this.$auth.loginWith(~~~): ログインするメソッド

などがあります。 このうち、3つ目のloginWithについて少し説明します。

$auth.loginWith

loginWithは次のように使います。

this.$auth.loginWith('local', {
  data: {
    username: 'your_username',
    password: 'your_password'
  }
})

####1つ目の引数
どのスキームを使うか、つまり'local'なのか'google'なのか

####2つ目の引数
ログインに必要なデータをオブジェクト形式で与えます。大体はユーザーネームorメールアドレスとパスワードになります。

実際のコードを見てみます。
詳細は省きますが、login.vue内でlogin処理をしたい時は以下のように書きます。

login.vue

<script>
export default {
...,
methods: {
  async login() {
    try {
      //ここでログイン処理
      await this.$auth.loginWith('local', {
        data: {
          auth: {
            email: this.email,
            password: this.password
          }
        }
      })
      //ログインできたらapolloにトークンを投げる
      await this.$apolloHelpers.onLogin(this.$auth.getToken('local').match(/^Bearer[ ]+([^ ]+)[ ]*$/i)[1])
      this.$router.push('/')
    } catch (e) {
      alert('エラーが発生しています')
    }
  }
}

ミドルウェア

nuxt.jsにはミドルウェアという、ページがレンダリングされる前に行われるカスタム関数を定義することができます。これを用いて不正アクセスを防止します。例えば、ログインしていないユーザーが、ログインしていないと見れないページに直接アクセスした場合にログインページへリダイレクトさせるというような処理を実装するべきです。

これを実装するには、'nuxt.config.js'内に

nuxt.config.js

...
router: {
  // これで任意のページがレンダリングされる前にuser_authが呼ばれる
  middleware: ['user_auth']
}

と書いて、
middleware/user_auth.jsを作成し、

user_auth.js

export default function ({ store, redirect }) {
  //ログインしていない場合にログインページに飛ばす
  if (!store.state.auth.loggedIn) {
    return redirect('/user/login');
  }
}

とするだけでもう実装完了です。とても便利ですね。

終わりに

今回はauthモジュールについて解説しました。少しでも参考になったらいいねしていただけると嬉しいです！他の記事もご覧ください！！

参考

公式ドキュメント
鬼ほどわかりやすい動画