Vue で動的に追加されたルーティングページの更新時に失敗する理由と解決策

問題の説明

昨日、Vue バックエンド管理システムのルートに権限ページを動的に追加する機能に取り組んでいたときに、動的に追加されたルーティングページでページを更新すると 404 エラーが発生するという問題が発生しました。

シナリオ

バックエンド管理システムの権限制御は、フロントエンドページで権限コードを定義し、コードをバックエンドの同僚に保存し、テーブルに設定することで実現されます。次に、バックエンドから返された権限コードリストがフィルタリングされ、フロントエンドページで構成されたコードメニューリストと照合されます。コードが等しいページは権限のあるページであり、router.addRoute() を通じてルートに動的に追加されます。権限のあるルートにのみアクセスでき、そうでない場合は権限がないというメッセージが表示されます。

固定ルートは、ログインページのログインなど、新しいルーターの最初に配置されます。

インターフェースリターン

フロントエンドメニューの定義

vuex のメソッド

問題

ログイン後、vuexのメソッドを呼び出して権限コードの取得を完了し、権限ルーティングページの操作を動的にフィルタリングし、router.addRoute()を介してルートに権限メニューを追加し、動的に追加されたルーティングページに入り、ページを更新して404を表示します。

原因分析

ページが更新されると、ルートが再初期化されます。動的に追加されたルートは存在しなくなります。一部の固定ルート (ログインページなど) のみが残っているため、404 エラーが発生します。

解決

VUEX ストアに保存されたデータは、ページが更新されるとクリアされます。
ルートのグローバルナビゲーション router.beforeEach で判定を行い、VUEX に格納されているリストに値があるかどうかでページがリフレッシュされるかどうかを判定します。0 でない場合は初回ログインです。ログイン後はマッチングしたルートが使用されるため問題ありません。list.length が 0 の場合はリフレッシュページなので、ルートマッチングを再実行し、動的ルートを再度追加する必要があります。

ナビゲーションガードにロジック判断を追加するために、コードroute/index.jsを実装します。

———router.js————-

const 定数ルート = [
 {
  パス： '/'、
  リダイレクト: '/login'
 },
 {
  パス: '/login',
  名前: 'ログイン',
  メタ: {
   認証: 偽
  },
  コンポーネント: () => import('@/views/login')
 },
 {
  パス: '/layout',
  名前: 'レイアウト',
  メタ: {
   認証: 有効
  },
  コンポーネント: () => import('@/views/layout/index'),
  子供たち： [
   {
    パス: '/index',
    名前: 'インデックス',
    コンポーネント: () => import('@/views/home')
   }
  ]
 },
 {
  パス： '*'、
  コンポーネント: () => import('@/views/error/404')
 }
]

Vue.use(VueRouter)
const createRouter = () =>
 新しいVueRouter({
  ルート: 定数ルート
 })
エクスポート関数resetRouter() {
 定数 newRouter = createRouter()
 router.matcher = newRouter.matcher // ルーターをリセットする
}
定数ルーター = createRouter()
 
// ページが更新された後に動的ルーティングの 404 問題を防ぐために、権限ページの動的ルーティングをリセットします。const reSetPermissionList = to => {
 新しい Promise を返します ((resolve, reject) => {
  to.path !== '/login' && store.state.permission.permissionList.length === 0 の場合 {
   店
    .dispatch('permission/getPermissionList')
    .then(() => {
     解決('permCode')
    })
    .catch(エラー => {
     解決('permCode')
    })
  } それ以外 {
   解決する（）
  }
 })
}
router.beforeEach((to, from, next) => {
  
 const accessToken = localStorage.getItem('accessToken')
 if (_.isEmpty(accessToken)){//ログインしていますか? ログインページへ進みます next({
   パス: '/login',
   クエリ: {
    リダイレクト: to.fullPath
   }
  })
 } else { //ログインしたユーザーがページに入る if (to.path === '/login') {
   次へ({ パス: '/index' })
  } それ以外 {
    reSetPermissionList(to).then(データ => {
     データ === 'permCode' ? next({ パス: to.path, クエリ: to.query }): next()
    })
  }
 }
 
})