Die Sicherheitsauthentifizierung von Webanwendungen ist von entscheidender Bedeutung. Es erm?glicht eine personalisierte Erfahrung, l?dt benutzerspezifische Inhalte (z. B. Anmeldestatus) und kann auch zur Bewertung von Berechtigungen verwendet werden, um zu verhindern, dass nicht autorisierte Benutzer auf private Informationen zugreifen.

Anwendungen schützen Inhalte in der Regel, indem Inhalte unter eine bestimmte Route platziert und die Umleitungsregeln erstellt werden, wodurch die Benutzer aufgrund ihrer Berechtigungen zugreifen oder von Ressourcen abgehalten werden. Um den Inhalt zuverl?ssig hinter geschützte Routen zu legen, müssen unabh?ngige statische Seiten erstellt werden. Auf diese Weise k?nnen die Umleitungsregeln die Umleitung korrekt behandeln.

Für einzelne Seitenanwendungen (SPAS), die mit modernen Front-End-Frameworks wie VUE erstellt wurden, k?nnen Umleitungsregeln nicht zum Schutz von Routing verwendet werden. Da alle Seiten aus einer einzelnen Eintragsdatei aus der Sicht eines Browsers stammen, gibt es nur eine Seite: index.html. In Spa stammt die Routing -Logik normalerweise aus Routing -Dateien. Dieser Artikel konfiguriert hier haupts?chlich die Authentifizierung. Wir werden uns ausdrücklich auf die Navigationsbeamten von VUE angewiesen, um authentifizierungsspezifische Routen zu verarbeiten, da wir uns hilft, auf ausgew?hlte Routen zuzugreifen, bevor die Route vollst?ndig analysiert wird. Lassen Sie uns in die Funktionsweise gehen.

Routing -Grundlagen

Die Navigationsschutz ist eine spezifische Funktion im Vue -Router, die zus?tzliche Funktionen über die Aufl?sung von Routing bietet. Sie werden haupts?chlich verwendet, um Fehlerzust?nde zu behandeln und Benutzer nahtlos zu führen, ohne ihren Workflow abrupt zu unterbrechen.

In Vue Router gibt es drei Hauptkategorien von Wachen: Global Guards, Router Exklusive Guards und Komponentenw?chter. Wie der Name schon sagt, wird der globale Wachmann aufgerufen, wenn eine Navigation ausgel?st wird (d. H. Wenn sich die URL ?ndert), wird die ausschlie?liche Route ausschlie?t, wenn sie die zugeh?rige Route aufruft (d. H. Wenn die URL mit einer bestimmten Route übereinstimmt), und der Komponentenschutz wird beim Erstellen, Aktualisieren oder Zerst?ren von Komponenten in der Route aufgerufen. In jeder Kategorie gibt es noch andere M?glichkeiten, um Ihnen eine st?rkere Kontrolle über Anwendungsrouting zu erhalten. Hier finden Sie eine kurze Aufschlüsselung aller Methoden, die in jedem Navigationsschutz im Vue -Router verfügbar sind.

Globale Wache

• beforeEach : Betrieb vor Eingabe einer Route (auf diesen Umfang k?nnen nicht zugegriffen werden)
• beforeResolve : Aktion vor der Navigationsbest?tigung, jedoch nach Komponentenschutz (wie vorab, mit Zugriff auf diesen Bereich)
• afterEach : Operation nach Routing -L?sung (kann die Navigation nicht beeinflussen)

Route Exklusive Wache

• beforeEnter : Betrieb vor dem Eintritt in eine bestimmte Route (im Gegensatz zum globalen Guard kann dieser Wachmann darauf zugreifen)

Komponentenwache

• beforeRouteEnter : Aktionen vor der Navigationsbest?tigung und vor der Erstellung von Komponenten (auf diese k?nnen nicht zugegriffen werden)
• beforeRouteUpdate : Die Operation, die nach dem Aufrufen einer neuen Route mit derselben Komponente ausgeführt wurde
• beforeRouteLeave : Betrieb vor dem Verlassen der Route

Routing schützen

Um sie effektiv zu implementieren, ist es hilfreich zu wissen, wann sie in einem bestimmten Szenario verwendet werden müssen. Wenn Sie beispielsweise Seitenansichten für die Analyse verfolgen m?chten, m?chten Sie m?glicherweise den globalen Afterach -Schutz verwenden, da er nach der Route ausgel?st wird und zugeh?rige Komponenten vollst?ndig analysiert werden. Wenn Sie Daten vor der Routenanalyse in den Vuex -Speicher vorlegen m?chten, k?nnen Sie die exklusive Wache der voreinerhaltenden Route verwenden.

Da unser Beispiel mit dem Schutz bestimmter Routen basierend auf den Zugriffsrechten der Benutzer zug?nglich ist, werden wir Komponentenw?chter verwenden, d. H. Vorher vor den Hooks. Mit dieser Navigationsgarde k?nnen wir auf die richtige Route zugreifen, bevor die Parsen abgeschlossen ist. Dies bedeutet, dass wir Daten abrufen oder prüfen k?nnen, ob die Daten geladen werden, bevor der Benutzer bestanden werden kann. Bevor Sie sich mit den Implementierungsdetails der Funktionsweise befassen, sehen wir uns kurz an, wie der voreinere Hook in unsere vorhandenen Routing -Dateien aufgenommen wird. Im Folgenden finden Sie unsere Beispielrouting -Datei, die unsere geschützten Routen enth?lt, die treffend als geschützt bezeichnet werden. Wir werden den voreinerhaltenden Haken wie folgt hinzufügen:

 const router = neuer vuerouter ({{
  Routen: [
    ...
    {
      Pfad: "/geschützt",
      Name: "geschützt",
      Komponente: Import (/ * webpackChunkName: "Protected" */'./Protected.vue'),
      voreinstürmen (zu, von, als n?chstes) {
        // Logik hier}
    }
  ]
})

Routing -Struktur

Die Struktur von voreinerem Unterschied unterscheidet sich nicht von anderen im Vue -Router erh?ltlichen Navigationsw?chter. Es akzeptiert drei Parameter: to "zukünftige" Route, auf die die Anwendung navigiert; from der "aktuellen/unmittelbar bevorstehenden Vergangenheit" -Route, auf die die Anwendung abreibt; next muss die Funktion aufgerufen werden, um die Route erfolgreich zu l?sen.

Im Allgemeinen wird bei der Verwendung von Vue Router als n?chstes ohne Argumente aufgerufen. Dies setzt jedoch einen dauerhaften Erfolgszustand aus. In unserem Fall m?chten wir sicherstellen, dass nicht autorisierte Benutzer nicht auf geschützte Ressourcen zugreifen k?nnen und dass es alternative Pfade gibt, die ordnungsgem?? umgeleitet werden k?nnen. Dazu werden wir einen Parameter an den n?chsten übergeben. Dazu werden wir den Routennamen verwenden, um durch den Benutzer zu navigieren. Wenn sie nicht autorisiert sind, sieht es so aus:

 n?chste({
  Name: "Dashboard"
})

Nehmen wir in unserem Beispiel an, wir haben einen Vuex -Store, in dem wir den Autorisierungs -Token des Benutzers speichern. Um zu überprüfen, ob der Benutzer Berechtigungen hat, werden wir diesen Gesch?ft überprüfen und angemessen oder über die Route versagen.

 voreinstürmen (zu, von, als n?chstes) {
  // Vuex Storage überprüfen //
  if (store.tertters ["Auth/HaSpermission"]) {
    n?chste()
  } anders {
    n?chste({
      Name: "Dashboard" // kehren Sie zur sicheren Route zurück //
    });
  }
}

Um sicherzustellen, dass Ereignisse synchron auftreten und dass die Route erst nach Abschluss der Vuex -Operation vorzeitig geladen wird, konvertieren wir den Navigationsschutz, um Async/Warten zu verwenden.

 asynchron voreinstürmen (zu, von, als n?chstes) {
  versuchen {
    var HaSermission = Warte Store.dispatch ("Auth/HaSermission");
    if (HaSermission) {
      n?chste()
    }
  } catch (e) {
    n?chste({
      Name: "Dashboard" // kehren Sie zur sicheren Route zurück //
    })
  }
}

Erinnere dich an die Quelle

Bisher haben unsere Navigationsbeamten ihren Zweck erreicht, sie daran zu hindern, auf geschützte Ressourcen zuzugreifen, indem sie nicht autorisierte Benutzer dorthin umgeleitet haben, woher sie stammen (d. H. Das Dashboard -Seiten). Trotzdem ist ein solcher Workflow destruktiv. Da die Umleitung unerwartet ist, k?nnte der Benutzer der Meinung, dass es sich um einen Benutzerfehler handelt, und versuchen, wiederholt auf die Route zuzugreifen, wobei letztendlich der Meinung ist, dass die Anwendung besch?digt ist. Um dieses Problem zu l?sen, erstellen wir eine Methode, mit der Benutzer wissen, wann und warum sie umgeleitet werden.

Wir k?nnen dies tun, indem wir Abfrageparameter an die n?chste Funktion übergeben. Auf diese Weise k?nnen wir den geschützten Ressourcenpfad an die Umleitungs -URL anbringen. Wenn Sie also den Benutzer auffordern m?chten, sich bei der App anzumelden oder die richtigen Berechtigungen zu erhalten, ohne sich daran zu erinnern, wo er angehalten hat, k?nnen Sie dies tun. Wir k?nnen auf den Pfad der geschützten Ressource zugreifen, um das an die voreingestellte Funktion übergebene Objekt wie nachstehend gezeigt: to.fullpath.

 asynchron voreinstürmen (zu, von, als n?chstes) {
  versuchen {
    var HaSermission = Warte Store.dispatch ("Auth/HaSermission");
    if (HaSermission) {
      n?chste()
    }
  } catch (e) {
    n?chste({
      Name: "Login", // zurück zur sicheren Route // zurückkehren //
      Abfrage: {redirectfrom: to.fullpath}
    })
  }
}

benachrichtigen

Der n?chste Schritt zur Verbesserung des Workflows für Benutzer, um keinen Zugriff auf geschützte Routen zu haben, besteht darin, ihnen Nachrichten zu senden, um sie über den Fehler und die Behebung des Problems zu informieren (indem sie sich anmelden oder die richtigen Berechtigungen erhalten). Dazu k?nnen wir Komponentenw?chter, insbesondere Beforerouteenter, verwenden, um zu überprüfen, ob Weiterleitungen aufgetreten sind. Da wir den Umleitungspfad als Abfrageparameter an unsere Routing -Datei übergeben, k?nnen wir jetzt das Routing -Objekt überprüfen, um festzustellen, ob die Umleitung aufgetreten ist.

 Beforerouteenter (an, von, n?chsten) {
  if (to.query.redirectfrom) {
    // etwas tun //
  }
}

Wie ich bereits erw?hnt habe, müssen alle Navigationsbeamten neben der Entschlossenheit die Route anrufen. Wie wir bereits gesehen haben, besteht der Vorteil der n?chsten Funktion darin, dass wir ein Objekt an dieses übergeben k?nnen. Was Sie vielleicht nicht wissen, ist, dass Sie in der n?chsten Funktion auch auf Vue -Instanzen zugreifen k?nnen. Wow! So sieht es aus:

 Weiter (() => {
  console.log (this) // Dies ist eine Vue -Instanz})

M?glicherweise haben Sie festgestellt, dass Sie bei der Verwendung voreiner Zeit nicht auf diesen Bereich zugreifen . Dies kann zwar der Fall sein, aber Sie k?nnen trotzdem auf die VUE -Instanz zugreifen, indem Sie die VM an die Funktion übergeben, wie Sie:

 Weiter (vm => {
  console.log (vm) // Dies ist eine Vue -Instanz})

Dies ist besonders bequem, da Sie die Dateneigenschaften jetzt ohne zus?tzliche Konfiguration einfach erstellen und ordnungsgem?? aktualisieren k?nnen. Mit dieser Methode erhalten Sie eine solche Komponente:

<template><div>
    {{errormsg}}

    ...

  </div>
</template>

<script>
export default {
  name: "Error",
  data() {
    return {
      errorMsg: null
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.redirectFrom) {
      next(vm => {
        vm.errorMsg =
          "對(duì)不起，您沒有訪問請(qǐng)求路由的權(quán)限"
      })
    } else {
      next()
    }
  }
}
</script>

abschlie?end

Der Prozess der Integration der Authentifizierung in Ihre Anwendung kann schwierig sein. Wir erl?utern, wie nicht autorisierte Benutzer verhindern k?nnen, auf Routen zuzugreifen, und wie ein Workflow basierend auf den Benutzerberechtigungen erstellt werden, um Benutzer in geschützte Ressourcen umzuleiten oder von diesen weg. Bisher geht unsere Annahme, dass Sie die Authentifizierung in Ihrer Anwendung konfiguriert haben. Wenn Sie es noch nicht konfiguriert haben und es schnell zum Laufen bringen m?chten, empfehle ich dringend, die Authentifizierung als Dienst zu verwenden. Es gibt einige Anbieter wie das Authentifizierungs -Widget von Netlify oder Auth0's Lock.

Das obige ist der detaillierte Inhalt vonSchutz der Vue -Routen mit Navigationsgarden schützen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!