🕌

【ログイン機能】nuxtjs/auth-nextメモ

2021/06/16に公開

Nuxt

tech

authモジュールはNuxt.jsで利用できる認証モジュール
authを使うことによって非常に簡単にログイン・ログアウト等の機能を実装できる
Auth moduleはVuexを使用して、ユーザの認証情報を管理しま

セットアップ

以下実施

authおよびaxiosモジュールを追加する
認証ミドルウェアをセットアップする
ローカルスキームを構成する
オプションをカスタマイズする
- https://auth.nuxtjs.org/schemes/cookie
$authサービスを利用する

authおよびaxiosモジュールを追加

インストール

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

modulesセクションに@nuxtjs/auth-next追加
nuxt.config.js

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

認証ミドルウェアをセットアップする

今回はグローバルに設定
!これするとNuxtLinkで他ページに遷移できなくなったので別途調査
nuxt.config.js

router: {
  middleware: ['auth']
}

グローバルに使用する場合は、特定のコンポーネントでauthオプションをfalseに設定すると、ミドルウェアはそのルートを無視する

export default {
  auth: false
}

個別設定

middleware: 'user_auth',

ローカルスキームを構成する

authの設定（認証のロジック）を記述する
nuxt.config.js

  auth:{
    redirect: {
      login: '/Signin',
      logout: '/',
      callback: '/login',
      home: '/TopAfterLogin'
    },
    localStorage: false,
    //strategiesの中身に認証ロジックを書いていく
    strategies:{
      //localという認証方法を使う場合
      local:{
        tokenType:'bearer',
	//axiosでアクセスする際の設定
        endpoints:{
          login:{
            url:'/auth/login', //ログインするときにアクセスするurl
            method:'post',
            propertyName:'access_token' //サーバーから帰ってくるトークンの名前
          },
          logout:{
            url:'/auth/logout',
            method:'post',
          },
          user:{
            url:'/auth/me',
            method:'get',
            propertyName:false
          }
        }
      },
    },
  },

$authサービスを利用する

以上のセットアップのおかげでどこのコンポーネント内でも
this.$auth.~~~が使えるように

重要なメソッド

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

$auth.loginWith

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

this.$auth.loginWith(どのスキームを使うか, ログインに必要なデータをオブジェクト形式で)

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

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

オプション

redirect

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

ログイン認証成功

詳細：https://zenn.dev/articles/6c2681f84934d4/edit
2021.07.02
実はかなりの間tokenをうまく取得できずログインできずにいた・・
（apiは問題なく機能していたのでnuxtの設定に原因があることはわかっていた）
いったんこれでできた

  auth:{
    redirect: {
      login: '/Signin',
      logout: '/',
      callback: '/Signin',
      home: '/TopAfterLogin'
    },
    localStorage: false, // JWTトークンをローカルストレージに入れておくのは危ない
    // 通信パターンやルートの定義
    strategies:{
      local:{
        token:{
          // type: 'Bearer',
          property: 'access_token',
        }, // 自動的にauthorizationヘッダーにbeareという文字を追加
        user: { //追加
          property: false
        },
        endpoints:{
          login:{
            url:'/auth/login',
            method:'post',
            propertyName:'access_token'
          },
          logout:{
            url:'/auth/logout',
            method:'post',
          },
          user:{
            url:'/auth/me',
            method:'get',
            propertyName:false
          }
        }
      },
    },
  },

参考記事

参考

https://auth.nuxtjs.org/

出てきた単語

クッキー

ローカルストレージ

cookieっぽいウェブストレージ

アクセストークン

認証済みユーザーを識別するための文字列
ユーザー登録やログインに成功すると、対象のサービスはユーザーに対してアクセストークンを発行する
ログイン後に入手したアクセストークンをメモリ上に保持→ログイン中のユーザーを識別

パスワードと同等のセキュリティを持つ情報

REST API を使用する場合、アクセストークンをクライアント側で保存

参照

エンドポイント

ネットワークに接続されている端末
今回でいうとlaravel（サーバー側）のアドレス