【Nuxt.js】Auth Moduleでログイン機能を実装する（ + Ruby on Rails・devise_token_authで認証を行う） #Nuxt

この記事の目的

Nuxt.jsアプリのAuth Module使ってログイン機能を実装するための記事です。

また、記事の最後にはRuby on Railsのdevise_token_authを使ってトークンベースで認証する方法も記載しています。

前提

Nuxt.jsのアプリが用意されていること
Nuxt.jsアプリとログインAPI用のエンドポイントはPOSTメソッド・/auth/sign_inとする

ログインの流れ

【ユーザ】 Nuxtアプリのログイン画面でEメールとパスワードを入力し、「送信」ボタンを押す
【Nuxtアプリ】 パスワードとEメール情報を付与し、APIの/auth/sign_inにHTTPリクエストを送信する
【API】 NuxtアプリからHTTPリクエストを受け取り、パスワードとEメールで認証をする。認証が完了し、HTTPレスポンスを返す
【Nuxtアプリ】 APIからHTTPレスポンスを受け取る
【Nuxtアプリ】 レスポンスヘッダー情報をVuex storeに保存する
【Nuxtアプリ】 ユーザをログイン画面からホーム画面へリダイレクトする
【Nuxtアプリ】 Vuex storeを確認し、ログイン済みであればログインしていないとアクセスできないページへのアクセスを許可する。ログイン済みでなければ、ログインページにリダイレクトする。

事前知識

Auth Moduleとは

Auth Moduleとは、Nuxt.jsプロジェクトにJWT（JSON Web Tokens）またはOAuth認証を使ってログイン機能を簡単に実装できるライブラリです。

ログイン機能は一から実装すると色々なことに気を使わないといけなくて大変なのですが、複雑な仕事を担ってくれているのがこのAuth Moduleです。

JWTとは

JWT(JSON Web Token)とは、JSONというデータ構造で情報が表現されたフォーマットです。安全にデータを運ぶために使用されます。JWTの詳しい説明は、下記の記事がわかりやすいです。
・JSON Web Token の効用
・認証におけるJWTの利用について

ステップ

Axiosを導入

Axiosを使用するので、Axiosを導入していない場合は下記のコマンドを実行してください。

$ yarn add @nuxtjs/axios
または
$ npm install @nuxtjs/axios

Auth Moduleを導入

下記コマンドでAuth Moduleを導入します。

$ yarn add @nuxtjs/auth
または
$ npm install @nuxtjs/auth

Vuex store用に`index.js`ファイルを作成

Auth moduleはVuex storeを使ってユーザの情報やログイン情報を管理します。そのためVuex store用のファイルを用意しておく必要があります。nuxtアプリのルートディレクトリにVuex storeというディレクトがあるので、そこにindex.jsという名前のファイルを作成しておきます。index.jsの中はからっぽで大丈夫です。

`nuxt.config.js`を修正

nuxt.config.jsのmodulesに下記を加えます。

nuxt.config.js

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

さらに、nuxt.config.jsに下記を追加します。

nuxt.config.js

  axios: {
    baseURL: 'http:localhost:3000'
  },
  auth: {
    redirect: {
      login: '/login', 
      logout: '/login',
      callback: false,
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/sign_in', method: 'post', propertyName: false },
          logout: false,
          user: false
        }
      }
    }  
  }

`axios`

baseURLを設定する事で、HTTPリクエストを送信するベースとなるURLが自動で設定されます。
ログインする際のRailsアプリのURLは/auth/sign_inのみですが、NuxtアプリでHTTPリクエストを送信する時に、axiosがhttp:localhost:3000/auth/sign_inにURLを自動的に変えてくれます。これを設定しないとうまくいかないので、忘れない様にしましょう。

`redirect`

redirect: ユーザの状態（ログインしているか否か）でどこにリダイレクトするかなどを設定します。
login: ユーザが未ログイン時、ログインしていないとアクセスできないページにアクセスした際のリダイレクトURLです。
logout: ユーザがログアウトした時のリダイレクトURLです。
callback: Oauth認証等で必要となるコールバック用URLです。今回はOauth認証は使わないのでfalseです。
home: ログイン成功後にリダイレクトするURLです。

`strategies`

strategies: Auth Moduleのどの認証ロジックを使うかを指定します。JWTとCookieを使うlocalと、OAuthを使うsocialの２種類があります。今回はJWTを使って認証を行うので、localです。
endpoints: どのメソッドが呼ばれた際にAPIのどのエンドポイントに飛ばすかを指定します。（logoutはログアウト用のAPIエンドポイントを指定しますが、今回は実装しないのでfalseです。同様にユーザ情報を取得するためのuserもfalseにしています。)

ログイン画面の作成

次にログイン画面を作っていきます。（今回は、Vuetifyというマテリアルデザインフレームワークを使っているので、HTMLタグはVuetify仕様になっています。）

<template>
  <div class="mt-3">
    <v-card class="mt-5 mx-auto" max-width="600">
      <v-form ref="form" v-model="valid" lazy-validation>
        <v-container>
          <v-row justify="center">
            <p cols="12" class="mt-3 display-1 grey--text">
              ログイン
            </p>
          </v-row>
          <v-row justify="center">
            <v-col cols="12" md="10" sm="10">
              <v-text-field
                v-model="email"
                label="Eメールアドレス"
              />
              <p class="caption mb-0" />
            </v-col>
          </v-row>
          <v-row justify="center">
            <v-col cols="12" md="10" sm="10">
              <v-text-field
                v-model="password"
                type="password"
                label="パスワード"
              />
            </v-col>
          </v-row>
          <v-row justify="center">
            <v-col cols="12" md="10" sm="10">
              <v-btn
                block
                class="mr-4 blue white--text"
                @click="loginWithAuthModule"
              >
                ログイン
              </v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-form>
    </v-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      password: '',
      email: ''
    }
  },
  methods: {
    async loginWithAuthModule () {
      await this.$auth.loginWith('local', {
        data: {
          email: this.email,
          password: this.password
        }
      })
        .then((response) => {
          return response
        },
        (error) => {
          return error
        })
    }
  }
}
</script>

すると、下記の様な画面が出来上がります。

ここでAPIのUsersテーブルに保存してあるメールアドレスとパスワードを入力しログインボタンを押します。パスワードとメールアドレスは下記の様なJSONとしてAPIに送信されます。

{
  "email": "momoko@test.xom",
  "password": "password"
}

認証が通りAPIからHTTPレスポンスが返ってくると、ホーム（/）ページにリダイレクトされるはずです。

ブラウザのディベロッパーズツールのコンソールで$nuxt.$storeを見てみます。ログイン後は$nuxt.$store.state.auth.loggedInがtrueになっていることがわかります。

ログイン前

ログイン後

`middleware`を設定する

middlewareを設定する事で、下記を自動化することができます。

ログインしていなかったら、強制的にログイン画面へリダイレクトする
ログインしていている状態でログイン画面にアクセスしようとするとホームへリダイレクトする

nuxt.config.jsでmiddlewareの設定を加えます。

nuxt.config.js

  router: {
    middleware: ['auth']
  }

これだけ！これでログインしている状態で/loginにアクセスしようとしてもホームにリダイレクトされるはずです。（サーバの再起動を忘れずに！）

ログインしてない時もこのページにはアクセスさせたい！という場合があると思います。そんなときは、そのページのVueファイルのscriptにauth: falseを入れてあげましょう。

<script>
export default {
  auth: false,
}
</script>

Ruby on Railsの`devise_token_auth`でログイン実装・認証をする

ログイン・認証の流れ

Auth Moduleとdevise_token_authを使ってのログイン・認証の流れは下記です。

【ユーザ】 Nuxtアプリのログイン画面でEメールとパスワードを入力し、「送信」ボタンを押す
【Nuxtアプリ】 パスワードとEメール情報を付与し、Railsアプリの/auth/sign_inにHTTPリクエストを送信する
【Nuxtアプリ】 認証されるとRailsアプリからレスポンスが返ってくる。レスポンスヘッダーのaccept-token、uid、clientを情報をVuex storeに保存する
【Nuxtアプリ】 ユーザをログイン画面からホーム画面へリダイレクトする
【Nuxtアプリ】 axiosでHTTPリクエストを送る時にaccept-token、uid、clientをリクエストヘッダーに付与し認証済みであることをRailsアプリに教える

これが基本的な認証の流れです。

HTTPレスポンスのヘッダーにアクセスしたい・・・！

さて、ここから超ハマったパートです。Ruby on Railのdevise_token_authでユーザ認証をやりとりするには、ログイン成功後にRailsアプリから返ってくるHTTPレスポンスのaccess-token、client、uidを取り出しVuex storeに保存、axiosでHTTPレスポンスを送信する度にこの3つをヘッダーに付与する必要があります。

この3つを付与せずにHTTPリクエストを送信する場合、Railsアプリは認証されていないと判断し、401 Unauthorizedのエラーを返します。

ということで、ログインが成功したらHTTPレスポンスのヘッダーにあるaccess-token、client、uidにアクセスし、Vuex storeに保存してあげたい。でも、この３つにどうやってアクセスしたらええんや！？

・・・めちゃくちゃはまりました。

調べた結果、Auth ModuleのIssueに対応策が書いてありました。

どうやらAuth ModuleはlocalStorage（Vuex store)にaccess-token、client、uidなどの認証情報を自動的に保存してくれる様です。そのため、ログイン成功時は、何もする必要はありません。

ただし、HTTPリクエストを送る時にlocalStorageからこの３つのデータを取り出し、HTTPリクエストのヘッダーにセットする必要がありますよね。

ということで、pluginsディレクトリにaxios.jsを作成し下記のコードを書いたところ、無事認証がされる様になりました！

nuxt.config.js

 // configの設定も忘れずに！
  plugins: [
    { src: '~/plugins/axios.js', ssr: false }
  ]

plugins/axios.js

export default function({ $axios }) {
  $axios.onRequest(config => {
    config.headers.client = window.localStorage.getItem("client")
    config.headers["access-token"] = window.localStorage.getItem("access-token")
    config.headers.uid = window.localStorage.getItem("uid")
    config.headers["token-type"] = window.localStorage.getItem("token-type")
  })

  $axios.onResponse(response => {
    if (response.headers.client) {
      localStorage.setItem("access-token", response.headers["access-token"])
      localStorage.setItem("client", response.headers.client)
      localStorage.setItem("uid", response.headers.uid)
      localStorage.setItem("token-type", response.headers["token-type"])
    }
  })
}

他にも方法があるかとは思いますが、今のところはこれが一番簡単そうです。別の方法知ってるよ〜という方がいらっしゃったらぜひ教えてください。

【Nuxt.js】Auth Moduleでログイン機能を実装する （ + Ruby on Rails・devise_token_authで認証を行う）

この記事の目的

前提

ログインの流れ

事前知識

Auth Moduleとは

JWTとは

ステップ

Axiosを導入

Auth Moduleを導入

Vuex store用にindex.jsファイルを作成

nuxt.config.jsを修正

axios

redirect

strategies

ログイン画面の作成

middlewareを設定する

Ruby on Railsのdevise_token_authでログイン実装・認証をする

ログイン・認証の流れ

HTTPレスポンスのヘッダーにアクセスしたい・・・！

【Nuxt.js】Auth Moduleでログイン機能を実装する（ + Ruby on Rails・devise_token_authで認証を行う）

Vuex store用に`index.js`ファイルを作成

`nuxt.config.js`を修正

`axios`

`redirect`

`strategies`

`middleware`を設定する

Ruby on Railsの`devise_token_auth`でログイン実装・認証をする