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

More than 3 years have passed since last update.

posted at

updated at

Organization

Nuxtで直接アクセスを禁止にするmiddlewareを作る

SPAで作っている場合、初期処理は別ページでするので深いページへの直接アクセスを禁止にしたい。みたいなことがあります。
そのような場合に、直接アクセスで別ページ(初期処理をするページ)にリダイレクトするmiddlwareの作り方の紹介です。

デモ

直接アクセス可能なURL

直接アクセスするとトップページに飛ばされるURL

実装

直接アクセスを禁止にするmiddlewareを作る

仕組みは本当にシンプルで from.nameroute.name が一致した場合に直接アクセスと判断しています。

middleware/disable-direct-access.js
export default function({ from, route, redirect }) {
  if (from.name === route.name) {
    redirect('/')
  }
}

middlwareを設定

これは先ほど作成したmiddlwareをmiddlwareプロパティに指定するだけです。
nuxt.config.jsにもmiddlwareを設定しています。

pages/middleware-sample/disable-direct-access.vue
<template>
  <div>
    <h1>disable-direct-access</h1>
    <nuxt-link to="/">top</nuxt-link>
  </div>
</template>

<script>
export default {
  middleware: 'disable-direct-access'
}
</script>

あとがき

全コードを公開しているので置いときます。
https://github.com/howdy39/nuxt-playground

もっと良いやり方あるよって場合、コメントくれると嬉しいです。

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
Sign upLogin
24
Help us understand the problem. What are the problem?