Wie implementiert man Berechtigungskontrolle und Routing-Schutz in Vue?

Wie implementiert man Berechtigungskontrolle und Routing-Schutz in Vue?

Als hervorragendes Front-End-Framework bietet Vue viele praktische Funktionen, die uns beim Erstellen von Anwendungen unterstützen. Darunter sind Routing und Berechtigungskontrolle ein unverzichtbarer Bestandteil. In der Entwicklung müssen wir Seiten häufig so einschränken, dass nur bestimmte Benutzer oder Berechtigungen sichtbar sind. Zu diesem Zeitpunkt sind die Routing-Guard- und Berechtigungskontrollfunktionen von Vue praktisch.

1. Berechtigungskontrolle

Vue implementiert die Berechtigungskontrolle über das Metaattribut der Routing-Konfiguration. Sie können dies tun:

1. Routen-Meta-Attribut hinzufügen

Sie können dem Meta-Attribut der Route eine Berechtigungskontrolle hinzufügen, um zu bestimmen, ob der Zugriff auf die Seite autorisiert ist.

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: {
    requiresAuth: true
  }
}

2. Routing Guards schreiben

Vue verwendet Routing Guards, um Seiten vor illegalem Zugriff zu schützen. Sie können der Route die Hook-Funktion beforeEnter hinzufügen, um vor dem Betreten der Seite festzustellen, ob Sie über eine Zugriffsberechtigung verfügen.

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      },
      beforeEnter: (to, from, next) => {
        if (!store.getters.isLoggedIn) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
})

Beachten Sie, dass store.getters.isLoggedIn eine in Vuex definierte Getter-Funktion ist, die dafür verantwortlich ist, festzustellen, ob sich der Benutzer angemeldet hat.

2. Route Guard

Mit dem Route Guard von Vue kann es Benutzer abfangen, wenn die Route springt, und den Zugriff des Benutzers verarbeiten.

1. Global Route Guard

Global Route Guard wird ausgelöst, wenn eine Route übersprungen wird, und kann zur Verarbeitung globaler Daten wie Anmeldestatus und Benutzerinformationen verwendet werden.

router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

2. Route Exclusive Guard

Route Exclusive Guard wird in der aktuellen Routing-Konfiguration eingestellt und kann bestimmte Routen individuell abfangen.

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    // 判断用户权限
    if (store.getters.getPermission === ‘admin’) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  }
}

Stellen Sie in der Hook-Funktion beforeEnter fest, ob die Benutzerberechtigungen ausreichend sind. Wenn nicht, springen Sie zur Anmeldeseite.

Zusammenfassung

Die Implementierung von Berechtigungskontrolle und Routing-Guards in Vue ist ein sehr praktischer Prozess. Durch Festlegen des Metaattributs der Route und Verwendung von Route Guards können wir den Zugriff auf Seiten basierend auf dem Anmeldestatus und den Berechtigungen des Benutzers steuern. Dies gewährleistet nicht nur die Sicherheit der Anwendung, sondern verbessert auch das Benutzererlebnis.

Das obige ist der detaillierte Inhalt vonWie implementiert man Berechtigungskontrolle und Routing-Schutz in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!