【Nuxt.js】middlewareでリダイレクト処理をしたらトップページが表示されなくなる時の対処法

はじめに

こんにちは。
こちらの記事では、ログイン前後のリダイレクトを正常に行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

middlewareとは

middlewareディレクトリは、ページがレンダリングされる前に処理を実行できる関数を定義できるディレクトリ。ログイン前後のリダイレクト処理を実行する時に用いられる。

全ページに適用させたい場合はnuxt.config.jsに、middlewareディレクトリ直下のファイル名を記述し、ページごとに適用させる場合はmiddlewareプロパティを追記する必要がある。

nuxt.config.js

router: {
    middleware: 'ファイル名'
}  

pages/login.vue

export default {
    middleware: 'ファイル名'
}

参考記事：https://nuxtjs.org/docs/directory-structure/middleware/

問題・原因・対処法

前提として、storeディレクトリ内でログイン状態を管理するloginを定義し、ログイン後ならtrue、ログイン前ならfalseを返す。storeディレクトリから呼び出し、定数userLoginとしてログイン状態を管理する。

下記の通り、middlewareディレクトリ内に作成したauthenticated.jsに、ログイン前はログインページへリダイレクトし、ログイン後はメインページへリダイレクトする処理を記述した。

middleware/authenticated.js

export default function({ store, route, redirect }) {

  //ログイン状態を管理
  const userLogin = store.state.user.login;

  //ログイン前の処理
  if (!userLogin && route.name !== "login" && route.name !== "register") {
    return redirect("/login");
  }

  //ログイン後の処理
  if (userLogin && route.name === "login" || route.name === "register")
  ) {
    return redirect("/main");
  }
}

起きていること

トップページにアクセスしようとするとリダイレクトされてしまい、画面が表示されなくなってしまう。

なぜこの問題が発生したのか

ログイン前の処理でログインページにリダイレクトする条件が、
「ログインしていない」かつ「ログインページではない」かつ「登録ページではない」
という条件なのでログインしていない状態だと、トップページもリダイレクトされる対象になってしまうため。

middleware/authenticated.js

  //ログイン前の処理
  if (!userLogin && route.name !== "login" && route.name !== "register") {
    return redirect("/login");
  }

解決方法

ログインしていない時にログインページへリダイレクトする処理から、トップページを除外する必要がある。試した解決方法は以下の２つです。

middleware/authenticated.js

  //ログイン前の処理
  if (!userLogin && route.name !== "login" && route.name !== "register" &&  route.name !== "index") {
    return redirect("/login");
  }

ログイン前の処理の条件にトップページも含める。&& route.name !== "index"
または、

middleware/authenticated.js

export default function({ store, route, redirect }) {

  //ログイン状態を管理
  const userLogin = store.state.user.login;

  //トップページをリダイレクトから除外
  if (!userLogin && route.name === "index") {
    return false;
  }

  //ログイン前の処理
  //以下省略
}

トップページをリダイレクトから除外する処理を記述する。

参考記事：https://blog.cloud-acct.com/posts/u-nuxt-redirect-middleware/

おわりに

ここまでmiddlewareでリダイレクト処理を正常に行う方法についてまとめました。
ログインまわりの実装を始めてからエラーに遭遇する回数が増え、少しずつですが対応に慣れてきた気がします！今後もコツコツ実装を進めていきたいと思います！
以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！