Nuxtで完了画面などへの直接アクセス（SSR時）を拒否する方法

Nuxtで直接アクセスさせないページを作成する

Nuxt.jsのuniversalモードでの開発で、応募や購入など何らかのアクション後の完了画面で直接アクセスをさせない方法を紹介します。

ミドルウェアを使って直接アクセス禁止機能の実装

ミドルウェアを使って簡単に実装・持ち回りができます。
早速、以下コードになります。

/middleware/reject-direct.js

export default function ({ ssrContext, redirect }) {
  if (ssrContext) {
    redirect('/')
  }
}

Nuxtでは、SSR時にssrContextに値が設定されるので、
それがあるかないかだけのシンプルな判定で直接アクセスを拒否して、別のページに飛ばす機能を実現できます。
使い方は、このミドルウェアを直接アクセス禁止にしたいページで持ち回るだけです。

作成した直接アクセス拒否のミドルウェアをページコンポーネントで読み込む

普通にscript内でmiddleware: 'reject-direct'と書いて、利用ミドルウェアを設定します。
完了ページは検索エンジンに載せたくないと思いますので、metaタグのnoindex,nofollowも合わせて設定しています。

completed.vue

<template>
  <section>
    <h1>完了</h1>
    <p>完了しました</p>
  </section>
</template>

<script>
export default {
  middleware: 'reject-direct',
  layout: 'default', //各自、任意のレイアウトを指定してください
  head () {
    return {
      title: '完了',
      meta: [
        { hid: 'description', name: 'description', content: '完了ページです' },
        { hid: 'robots', name: 'robots', content: 'noindex,follow'}
      ]
    }
  }
}
</script>

まとめ

• ミドルウェアで汎用的なアクセス制限機能をつくれる
• SSR時に設定されるコンテキストを使って、直接アクセスを判定する
• ページコンポーネントで作成したミドルウェアを設定する

Nuxtでのアクセス制御、特に直接アクセスを拒否したいときの参考になれば幸いです。

参考にしたページ

Nuxtで、SPAモードで開発している方はこちらが参考になるかと思います。
https://qiita.com/howdy39/items/2587d7950acc39d468d7