ナビゲーションガードでのページ遷移制御（beforeEach）

Question

ナビゲーションガードでのページ遷移制御（beforeEach）

やりたいこと

• URLの直叩きによる画面遷移を権限によって制御する

実装（ナビゲーションガード以外の部分）

• default.vueには独自のコンポーネントを設置しており、menuというプロパティにメニューと遷移先のデータをバインドすることでメニューを表示している。

<template>
  <cas-default-template
    id="sideNav"
    title="タイトル"
    :page-title="title"
    :sub-title="subTitle"
    :menus="availableMenus" //computedで権限に対するメニューを作成している
    :router="true"
    @click.native="check"
  >
    <nuxt />
  </cas-default-template>
</template>

<script lang="ts">
//import等は省略
created() {
    this.$store.dispatch('menu/security').then(() => {
      //ログインユーザの権限情報取得
      const response: SecurityInfo = this.security
      })
      /**権限情報に基づきメニューを生成 */
      this.getAvailableMenus()
   }
   
/**取得した権限情報をもとにメニューを構成 */
  getAvailableMenus() {
    for (let i = 0; i < this.menus.length; i++) {
      if (this.menus[i].disabled) {
        this.availableMenus.push(this.menus[i])
        for (let j = 0; j < this.menus[i].subs.length; j++) {
          if (this.menus[i].subs[j].disabled) {
            this.menus[i].subs[j].disabled = false
          }
        }
      }
    }
  }
</script>

ナビゲーションガードの実装

• pluginsにファイルを作成してます（middlewareの方が適切？）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
                                 
export default async ({ app, store }) => {

 await store.dispatch('menu/security')
 let kngnInfo
 app.router.beforeEach((to, from) => {
    //ログインユーザの権限情報を取得
   const security = store.getters['menu/security']
    //URLとそれに対する権限のオブジェクトを用意
   const menus = [
     { kngn: 'kngnAAA', url: '/AAA' },
     { kngn: 'kngnBBB', url: '/BBB' },
     { kngn: 'kngnCCC', url: '/CCC' },
     { kngn: 'kngnDDD', url: '/DDD' },
     ]
   //遷移先URLの権限を持っているかを確認
   const toKngn = menus.find(menu => {
     return menu.url === to.path
   })
   //権限がない場合は遷移前画面へリダイレクト
   if (!security[toKngn.kngn]) {
     kngnInfo = security[toKngn.kngn]
     next(from.path)
   }
   next()
 })
}

• 現状以下のようにThis page could not be foundが発生しています。

【Vue.js】ナビゲーションガードについてなどを見て`afterEachを使ってみたりしましたが、afterなので権限がなくても一瞬遷移してしまいます。

• 助言をいただければ幸いです。

Answer 1

公式のこのissueと同じような状況でしょうか。
About the error "This page could not be found" in the next() in router.beforeEach()

この回答によるとmiddlewareによる解決が推奨されているようです。