LoginSignup
24

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-24

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24