Vueは2つのルーティング許可制御メソッドを実装しています

定数myRouter = 新しいVueRouter({
 ルート: [{
        パス: '/login',
        名前: 'ログイン',
        メタ: {
         役割: ['管理者', 'ユーザー']
        },
        コンポーネント: () => import('@/components/Login')
    },{
        パス: '/home',
        名前: 'ホーム',
        メタ: {
            役割: ['管理者']
        },
        コンポーネント: () => import('@/views/Home')
    },{
     パス: '/404',
     コンポーネント: () => import('@/components/404')
   }]
})

//インターフェースを通じてバックグラウンドから取得したユーザーロールをトークンに格納できると仮定します。const role = 'user'

myRouter.beforeEach((to,from,next)=>{
 to.meta.roles.includes(role) の場合 {
  next() //解放 }else{
  next({path:"/404"}) //404ページにジャンプ}
})

定数myRouter = 新しいVueRouter({
 ルート: [{
        パス: '/login',
        名前: 'ログイン',
        メタ: {
         タイトル: 「ログインページ」
         アイコン: 「ログイン」
        },
        コンポーネント: () => import('@/components/Login')
    },{
        パス: '/home',
        名前: 'ホーム',
        メタ: {
         タイトル: 「ホーム」
         アイコン: 'ホーム'、
         認証が必要: 有効
        },
        コンポーネント: () => import('@/views/Home')
    },{
     パス: '/404',
     コンポーネント: () => import('@/components/404')
   }]
})

myRouter.beforeEach((to,from,next)=>{
 flag = to.matched.some(record=>record.meta.requireAuth) とします。
 //ここでは、一致したループを使用して、to.meta が直接使用されない理由を見つけます。
 // サブルートがある場合は、まず通常のクリックロジックに従って、第 1 レベルのルートの次に第 2 レベルのルートが実行され、権限の判断が同じでなければならないことを明確にします //to.meta => サブルートのメタを直接検索します。第 1 レベルのルートに requireAuth:true が追加されていない場合は、第 1 レベルのルートページをブロックし、第 2 レベルのルートページに入ることができません。ユーザーが URL アドレスバーを直接改ざんすると、第 2 レベルのページに入ることができ、権限の問題が発生する可能性があります。次に、この権限の下にあるすべてのルートを //to.matched としてマークする必要があります => matched はルート配列であり、サブルートを含むすべてのルートの属性を収集するため、ループ判断と検索方法を通じて、第 1 レベルのルートに権限識別子を追加するだけで、その下にある他のサブルートを承認できます。
 if(フラグ){
  次（）
 }それ以外{
  次へ({パス:"/404"})
 }
})

//ストア.js
// vuexに動的に登録する必要があるルートを抽出します。const dynamicRoutes = [
  {
    パス: '/manage',
    名前: '管理'、
    メタ: {
      認証が必要: 有効
    },
    コンポーネント: () => import('./views/Manage')
  },
  {
    パス: '/userCenter',
    名前: 'UserCenter',
    メタ: {
      認証が必要: 有効
    },
    コンポーネント: () => import('./views/UserCenter')
  }
]

//ストア.js
setUserInfo (状態、ユーザー情報) {
  state.userInfo = ユーザー情報
  state.auth = true // ユーザー情報を取得するときにauthをtrueにします。もちろん、userInfoを直接判断することもできます。
  // ユーザールーティングテーブルを生成する state.userRoutes = dynamicRoutes.filter(route => {
    userInfo.menus.some(menu => menu.name === route.name) を返します
  })
  router.addRoutes(state.userRoutes) // ルートを登録する}

// アプリ.vue
<div id="nav">
   <router-link to="/">ホーム</router-link>
   <router-link to="/login">ログイン</router-link>
   <template v-for="(menu, index) of $store.state.userInfo.menus">
     <ルーターリンク:to="{ name: menu.name }":key="index">{{menu.title}}</ルーターリンク>
   </テンプレート>
</div>