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

#はじめに
こんにちは！
今回は[前回の記事](https://qiita.com/Yudai_35_/items/7b6ecfa5eeb1d7bdfc8d)の続き、midllewareを使用してのログイン判別についてアウトプットしていきます！

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

今回の記事の参考記事は[こちら](https://blog.cloud-acct.com/posts/u-nuxt-redirect-middleware/)

##使用環境

|使用技術  |バージョン  |
|:-:|:-:|
|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の指定方法は全部で３つあります。
①プロジェクト全体で指定する
②特定のページで指定する
③特定のページで関数を指定する

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

```javascript:nuxt.config.js
  router: {
    middleware: "authenticated"
    // 複数ファイル指定の場合は配列で
    // middleware: ['authenticated', 'stats']
  }
```
①プロジェクト全体で指定する方法で呼び出す場合は、nuxt.config.jsに登録します。
登録方法は、router.middlewareプロパティにファイル名を文字列で指定します。

#実装

```javascript: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ページへリダイレクト
![スクリーンショット 2021-12-26 10.01.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/12b71131-e6a5-d0d4-3ecb-103fc84dc6b7.png)
![スクリーンショット 2021-12-26 10.02.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/5e4ae0a5-9589-a419-3661-bc8cd9938ecd.png)
![スクリーンショット 2021-12-26 10.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/28d9bfe4-9853-d942-5d7e-c75fe3c4089e.png)

②ヘッダーにあるメモをクリックしメモページへアクセス
![スクリーンショット 2021-12-26 11.11.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/2cda36fd-1e5c-81cd-1ccf-2c61a911a670.png)

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

#login: falseの場合
①console.logでlogin:falseが確認されました
![スクリーンショット 2021-12-26 11.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/9ed0a5dc-2869-5ac9-1025-51feaff3619c.png)

②loginページのURLを書き換え、recordページ（メモページ）にアクセスしてみる
![スクリーンショット 2021-12-26 11.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/7e40c5ce-affb-bd93-008c-2deef80c0c05.png)

③login: falseのため`middleware/authenticated.js`のelse文が働き、メモページにアクセスしようとしてもログインページへリダイレクトされる
![スクリーンショット 2021-12-26 11.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/52d966db-767b-0b48-c630-9516de4768a6.png)

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

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

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

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

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