Moduleを利用して、GitHubとGoogleのOauth認証によるログイン機能を実装してみます。Nuxt.jsによるプロジェクト作成に関しては下記ページをご参照下さい。[$route.params][layouts]インストールと設定モジュールをインストールします。@nuxtjs/axiospackage.jsonのdependenciesを確認。Storeの機能を利用しています。この機能を有効化するために、storeディレクトリ内に一旦index.jsファイル(内容は空でも良い)を作成しておいて下さい。Nuxt.jsのStoreについては関連ページをご覧下さい。[vuex-persistedstate][js-cookie]次にnuxt.config.jsを編集します。'◯◯◯',},}},redirectログイン関連のリダイレクト先を指定しています。本記事では、index.vue・login.vue・callback.vue・home.vueのページコンポーネントを作成します。上記では、ログインするとhome.vueへ、ログアウトするとindex.vueへ、もし未ログイン状態でhome.vueにアクセスするとlogin.vueへリダイレクトされるように設定しています。Passportが選択(設定)できるようです。各プロバイダーで取得したid等を設定していきます。本記事ではGitHubとGoogleを利用しています。Moduleを利用して設定できますが、本記事では説明しません。上述したように、index.vue・login.vue・callback.vue・home.vue、4つのページコンポーネントを作成していきます。to="/login">ログイン画面へ</nuxt-link></div></template>トップ画面であると同時に、ログアウト(ログアウトボタンを押下)後に遷移する画面です。{this.$auth.loginWith("google");}}};</script>$auth.loginWith()の引数には、nuxt.config.jsのauth>strategiesのプロバイダー名を指定します。各プロバイダのOAuth設定画面にて登録しておきます。{this.$auth.logout();}}};</script>4・5行目$store.state.authもしくは$auth.$stateには、返ってきたオブジェクトが格納されています。認証ルートを設定しています。このミドルウェアを設定すると、ログインしていない状態でその画面に遷移するとログイン画面へリダイレクトさせます。false」を設定することによって認証ルートから外します。['auth']}参照ページhttps://nuxt-api-state.lec.cafe/5.認証/#auth-modulesの設定15行目$auth.logout()でログアウトします。