More than 1 year has passed since last update.

【Nuxt.js,Firebase,middleware】ユーザー登録、ログイン実装⑤ログイン前後のリダイレクト処理をmiddlewareで実装　

Last updated at 2021-12-30Posted at 2021-12-30

#はじめに
こんにちは！
今回は前回の記事の続き、midllewareを使用してのログイン判別についてアウトプットしていきます！

#対象
・未ログインではアクセスできないページの設定を行いたい方
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方
・前回の記事までの内容がお済みの方

今回の記事の参考記事はこちら

##使用環境

使用技術	バージョン
nuxt.js	2.15.7
firebase	9.6.1
firebase-tools	9.23.3
@nuxtjs/tailwindcss	4.2.0

##使用ファイル,概要

ファイル名	概要
middleware/authenticated.js	ログイン前後のリダイレクト処理
pages/diagonse.vue	診断ページ
pages/recordlist.vue	メモ一覧ページ
pages/record.vue	メモページ
pages/result.vue	診断結果表示ページ
pages/top.vue	ログイン後表示TOPページ
plugins/firerbase.js	firebase導入
store/index.js	ログインデータの管理&保持

#middlewareとは
middleware（ミドルウェア）には、ページをレンダリングする前に実行する関数を指定します。
一番初めに実行される処理です。（ライフライクルは、nuxtServerInitの後、asyncDataの前に実行されます。）

ファイルは「PORTFOLIOファイル👉middlewareファイル👉authenticated.js」で管理します。

#middlewareの指定方法
middlewareの指定方法は全部で３つあります。
①プロジェクト全体で指定する
②特定のページで指定する
③特定のページで関数を指定する

今回は多くのページ遷移で呼び出すので①プロジェクト全体で指定する方法で実装していきます。

nuxt.config.js

  router: {
    middleware: "authenticated"
    // 複数ファイル指定の場合は配列で
    // middleware: ['authenticated', 'stats']
  }

①プロジェクト全体で指定する方法で呼び出す場合は、nuxt.config.jsに登録します。
登録方法は、router.middlewareプロパティにファイル名を文字列で指定します。

#実装

middleware/authenticated.js

export default function ({ store, route, redirect }) {
    const userLogin = store.state.user.login
    console.log(userLogin)

    if (userLogin) {
        //ログインしているとき
        if (route.name === "login") {
            return redirect("/top")
        }
    }
    else {
        //ログインしていないとき → diagnose, recordlist, result, top, recordは入れない
        if (route.name === "diagnose" || route.name === "recordlist" || route.name === "result" || route.name === "top" || route.name === "record") {
            return redirect("/login")
        }

    }
}

・定数userLoginを定義し、store.state.user.loginを代入。console.logで状態を確認できるようにする。
・ログインに成功していて、routeの名前がloginの時、TOPページにリダイレクトされる。
👉この時stateにはlogin: tureとなっている。
・もしログインしていない状態(false)だった場合、diagnose, recordlist, result, top, recordページには入れず、loginページへリダイレクトされる。

#動作確認

##login: trueの場合
①ログインページへアクセスし、ログインを成功させTOPページへリダイレクト