#はじめに
こんにちは！
今回は前回の記事の続き、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ページへリダイレクト

②ヘッダーにあるメモをクリックしメモページへアクセス

アクセス成功の処理が確認されました！

#login: falseの場合
①console.logでlogin:falseが確認されました

②loginページのURLを書き換え、recordページ（メモページ）にアクセスしてみる

③login: falseのためmiddleware/authenticated.jsのelse文が働き、メモページにアクセスしようとしてもログインページへリダイレクトされる

アクセス失敗の処理が確認できました！

#まとめ
今回はログイン前後のリダイレクト処理をmiddlewareで実装について記事にしました。

今後も引き続きQiitにポートフォリオ制作での学びをアウトプットしていきます！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！