Vue implementiert zwei Methoden zur Steuerung der Routing-Berechtigung

const meinRouter = neuer VueRouter({
 Routen: [{
        Pfad: '/login',
        Name: 'Anmelden',
        Meta: {
         Rollen: ['Administrator', 'Benutzer']
        },
        Komponente: () => import('@/Komponenten/Login')
    },{
        Pfad: '/home',
        Name: 'Heimat',
        Meta: {
            Rollen: ['admin']
        },
        Komponente: () => import('@/views/Home')
    },{
     Pfad: '/404',
     Komponente: () => import('@/components/404')
   }]
})

//Angenommen, die über die Schnittstelle aus dem Hintergrund erhaltene Benutzerrolle kann im Token const role = 'user' gespeichert werden.

myRouter.beforeEach((bis,von,weiter)=>{
 wenn (to.meta.roles.includes(Rolle)) {
  weiter() // freigeben }else{
  next({path:"/404"}) //zur 404-Seite springen}
})

const meinRouter = neuer VueRouter({
 Routen: [{
        Pfad: '/login',
        Name: 'Anmelden',
        Meta: {
         Titel: „Anmeldeseite“
         Symbol: „Anmelden“
        },
        Komponente: () => import('@/Komponenten/Login')
    },{
        Pfad: '/home',
        Name: 'Heimat',
        Meta: {
         Titel: „Zuhause“
         Symbol: „Home“,
         requireAuth: wahr
        },
        Komponente: () => import('@/views/Home')
    },{
     Pfad: '/404',
     Komponente: () => import('@/components/404')
   }]
})

myRouter.beforeEach((bis,von,weiter)=>{
 let flag = to.matched.some(Datensatz=>Datensatz.meta.requireAuth);
 //Hier verwenden wir die Matched-Schleife, um den Grund zu finden, warum to.meta nicht direkt verwendet wird:
 //Wenn Unterrouten vorhanden sind, stellen Sie zunächst klar, dass gemäß der normalen Klicklogik auf die Route der ersten Ebene zuerst die Route der zweiten Ebene folgt und die Berechtigungsbeurteilung dieselbe sein muss //to.meta => durchsucht direkt die Metadaten der Unterroute. Wenn die Route der ersten Ebene requireAuth:true nicht hinzufügt, sollte die Routenseite der ersten Ebene blockiert werden und kann nicht auf die Routenseite der zweiten Ebene zugreifen. Wenn der Benutzer die URL-Adressleiste direkt manipuliert, kann die Seite der zweiten Ebene aufgerufen werden, und es können Probleme mit den Berechtigungen auftreten. Dann sollten alle Routen unter dieser Berechtigung mit //to.matched markiert werden => matched ist ein Routen-Array, das die Attribute aller Routen einschließlich der Unterrouten sammelt. Durch die Schleifenbeurteilung und die Suchmethode müssen Sie also nur der Route der ersten Ebene Berechtigungskennungen hinzufügen, um andere Unterrouten darunter zu autorisieren.
 wenn(Flagge){
  nächste()
 }anders{
  weiter({Pfad:"/404"})
 }
})

//store.js
// Extrahieren Sie die Routen, die dynamisch in vuex registriert werden müssen const dynamicRoutes = [
  {
    Pfad: '/verwalten',
    Name: 'Verwalten',
    Meta: {
      requireAuth: wahr
    },
    Komponente: () => import('./views/Manage')
  },
  {
    Pfad: '/userCenter',
    Name: 'UserCenter',
    Meta: {
      requireAuth: wahr
    },
    Komponente: () => import('./views/UserCenter')
  }
]

//store.js
setUserInfo (Status, Benutzerinfo) {
  state.userInfo = Benutzerinfo
  state.auth = true // Markieren Sie Auth als true, wenn Sie Benutzerinformationen erhalten. Natürlich können Sie userInfo auch direkt beurteilen
  // Benutzerroutingtabelle generieren state.userRoutes = dynamicRoutes.filter(route => {
    returniere userInfo.menus.some(menu => menü.name === route.name)
  })
  router.addRoutes(state.userRoutes) // Routen registrieren}

// App.vue
<div id="nav">
   <router-link to="/">Zuhause</router-link>
   <router-link to="/login">Anmelden</router-link>
   <template v-for="(Menü, Index) von $store.state.userInfo.menus">
     <router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link>
   </Vorlage>
</div>