35
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
35
Help us understand the problem. What are the problem?