【Nuxt.js】SSR時にリダイレクトする方法（クライアント側のやり方）

どうもこじらです。

超久しぶりの記事投稿。

今回はNuxt.jsでリダイレクトさせるという超ありふれたカテゴリの記事ですが、すぐ分からなくなりそうなので備忘録として記事を書いておきます。

また、今回のstoreを使用する実装は、以下の記事による設定が必要になります。（直接URLにアクセスしてきたときに想定外の挙動になるため。）

【Nuxt.js】vuex-persistedstateがイケてなくてリロード時にgettersでnullになった話

どうもこじらです。 Nuxt.jsのドキュメントが思ったより充実してません。 公式はなぜか404 Not Foundばっかりです。なんなんでしょう、これは一次的なものなんでしょうか？ 親切な方々がネットに色々情報を...

noumisoblog.com

2020.10.31

一番メジャーなリダイレクト

まずは、一番メジャーなリダイレクトの実装方法について。

・middleware/redirect.js

export default function ({ route, redirect, store }) {
  // "/"のURLにアクセスしてきたら、"/home"にリダイレクトする。
  if (route.path === '/') {
    return redirect('/home')
  }
}

  router: {
    middleware: ['redirect']
  },

ただ、１つ難点があります。この実装は、サーバサイドで実行する方法であるため、クライアントサイドで保持している情報を使用することができません。

例えば、管理者のみがアクセスできるページがあったとして、管理者権限であることを示すトークンを保持していない場合は、リダイレクトさせるみたいな実装は不可能です。

クライアント側でのリダイレクト

今度はmiddlewareではなくpluginsを使用します。

・plugins/redirect.js

export default function ({ store, app }) {
  app.router.beforeEach((to, from, next) => {
    const token = store.getters.token
    if (!token && to.path.match(/^\/manage/g)) {
      // "/manage/*"のURLにアクセスしてきたとき、認証済みでなかったらリダイレクトする。
      alert('認証されていません。不正な操作です。')
      next('/home')
    } else {
      next()
    }
  })
}

・nuxt.config.js

  plugins: [
    {
      src: '~/plugins/redirect',
      ssr: false
    },
}

router.beforeEachを使用するのがミソですね。トークンをstore(ローカルストレージ)に保持していて、管理者用のURLパターンに合致した場合のみ、その画面に遷移することができます。

この実装にたどり着くまで謎に苦戦しました…。

正常でない画面操作、正常でない業務パターンを考えるのは難しいです。ましてやクライアント側は不正し放題ですし。

こじらでした

じゃ