1. tsukiwakka

    Posted

    tsukiwakka
Changes in title
+【Nuxt universal】完了画面などで直接アクセス(SSR時)を拒否する方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,58 @@
+## Nuxtで直接アクセスを拒否するページを作成する
+Nuxt.jsでuniversalモードでの開発で、応募や購入など何らかのアクション後の完了画面で直接アクセスをさせない方法を紹介します。
+
+### ミドルウェアを使って実装する
+
+ミドルウェアを使って簡単に実装・持ち回りができます。
+早速、以下コードになります。
+
+```js:/middleware/reject-direct.js
+export default function ({ ssrContext, redirect }) {
+ if (ssrContext) {
+ redirect('/')
+ }
+}
+```
+Nuxtでは、SSR時に`ssrContext`に値が設定されるので、
+それがあるかないだけのシンプルな判定で直接アクセスを拒否して、別のページに飛ばす機能を実現できます。
+使い方は、このミドルウェアを直接アクセスを禁止したいページで持ち回るだけです。
+
+### 作成した直接アクセス拒否のミドルウェアをページコンポーネントで読み込む
+普通にscript内で`middleware: 'reject-direct'`と書いて、利用ミドルウェアを設定します。
+完了ページは検索エンジンに載せたくないと思いますので、metaタグの`noindex,nofollow`も合わせて設定しています。
+
+```js: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: '完了ページです' },
+ { name: 'robots', content: 'noindex,follow',}
+ ]
+ }
+ }
+}
+</script>
+```
+
+### まとめ
+- ミドルウェアで汎用的なアクセス制限機能をつくれる
+- SSR時に設定されるコンテキストを使って、直接アクセスを判定する
+- ページコンポーネントで作成したミドルウェアを設定する
+
+Nuxtでのアクセス制御、特に直接アクセスを拒否したいときの参考になれば幸いです。
+
+### 参考にしたページ
+Nuxtで、SPAモードで開発している方はこちらが参考になるかと思います。
+https://qiita.com/howdy39/items/2587d7950acc39d468d7