Schutz Vue-Routen mit Navigation-Wachen

0
11

Die Authentifizierung ist ein notwendiger Teil jeder web-Anwendung. Es ist ein praktisches Mittel, mit denen wir Personalisieren können Erfahrungen und laden von Inhalten, die speziell auf Benutzer — wie ein Login-Status. Es kann auch verwendet werden, um Berechtigungen ergeben, und ansonsten die privaten Daten vor dem Zugriff durch nicht autorisierte Benutzer.

Eine gängige Praxis, die Anwendungen verwenden, um Inhalte zu schützen, ist zu Haus, Sie unter bestimmten Strecken und bauen redirect-Regeln, die Benutzer navigieren in Richtung oder Weg von einer Ressource abhängig von Ihren Berechtigungen. Gate-Inhalte zuverlässig geschützt hinter Strecken, die Sie brauchen, um zu bauen, um separate statische Seiten. Auf diese Weise, redirect-Regeln kann die ordnungsgemäße Abwicklung leitet.

Im Fall von Single Page Applications (SPAs) gebaut mit modernen front-end-frameworks, wie Vue, redirect-Regeln können nicht genutzt werden, zu schützen Routen. Denn alle Seiten werden serviert von einem einzigen Eingabe-Datei von einem browser aus der Perspektive, es ist nur eine Seite: index.html. In einem SPA, route Logik in der Regel stammt aus einer Routen-Datei. Dies ist, wo wir die meisten unserer auth Konfiguration für diesen post. Wir werden insbesondere lean on Vue navigation Wachen zu handhaben Authentifizierung spezifisches routing, da dies hilft uns, Zugang ausgewählten Strecken, bevor es sich vollständig löst. Let ‘ s untersuchen, um zu sehen, wie das funktioniert.

Roots and Routes

Navigation Wachen sind eine spezifische Funktion innerhalb Vue Router, die zusätzliche Funktionen bereitstellen, die betreffen, wie Routen aufgelöst werden. Sie sind in Erster Linie verwendet, um Fehler verarbeiten Staaten und navigieren, einen Benutzer nahtlos, ohne abrupt unterbrechen Ihre Arbeitsabläufe.

Es gibt drei Hauptkategorien von Wachen in Vue-Router: Global Wachen, Je nach Route und Wachen In der Komponente Wachen. Wie die Namen bereits andeuten, Global Wachen genannt werden, wenn jede navigation ausgelöst wird (d.h., wenn Sie URLs ändern), Pro Strecke, Wachen sind aufgerufen, wenn die zugeordnete route aufgerufen wird (d.h. wenn eine URL entspricht eine bestimmte route), und die Komponente Wachen sind aufgerufen, wenn eine Komponente in eine route erstellt, aktualisiert oder gelöscht werden. Innerhalb jeder Kategorie gibt es weitere Methoden, die Ihnen mehr feinkörnige Kontrolle der Anwendung leitet. Hier ist eine kurze Aufschlüsselung, alle verfügbaren Methoden innerhalb jeder Art von navigation Garde Vue Router.

Global Wachen

  • beforeEach: Aktion vor dem eingeben der route (kein Zugang zu diesem Bereich)
  • beforeResolve: action, bevor die navigation ist bestätigt, aber nach in-Komponente der Garde (der gleiche wie beforeEach mit diesem Umfang Zugang)
  • afterEach: Aktion, nachdem die route behebt (kann nicht beeinflussen, navigation)

Pro Route Wachen

  • beforeEnter: Aktion vor der Eingabe einer bestimmten route (im Gegensatz zu globalen Wachen, dieser hat Zugriff auf diese)

Komponente Wachen

  • beforeRouteEnter: Aktion vor der navigation ist bestätigt, und die vor-Komponente erstellen (kein Zugriff auf diese)
  • beforeRouteUpdate: Aktion nach einer neuen route aufgerufen wurde, verwendet die gleichen Komponenten
  • beforeRouteLeave: Aktion vor dem verlassen einer route

Schutz Routen

Um effektiv umsetzen, hilft es zu wissen, wenn Sie in einem bestimmten Szenario. Wenn Sie wollten, um die Seitenaufrufe zu verfolgen, die für Analysen-zum Beispiel, möchten Sie vielleicht, um die Verwendung der globalen afterEach Wache, da wird es ausgelöst, wenn die route und der zugehörigen Komponenten vollständig gelöst. Und wenn Sie wollte prefetch-Daten laden auf einer Vuex speichern, bevor Sie eine route behebt, könnten Sie tun, damit mit der beforeEnter pro Strecke zu bewachen.

Da unser Beispiel befasst sich mit dem Schutz bestimmte Routen, basierend auf einem Benutzer-Zugriffsberechtigungen, wir verwenden in der Komponente navigation Wachen, nämlich die beforeEnter Haken. Diese Navigations-guard gibt uns Zugriff auf die richtige route vor dem lösen abgeschlossen ist; das heißt, wir können Daten abrufen oder überprüfen, dass die Daten geladen hat, bevor Sie einem Benutzer passieren. Vor dem eintauchen in die details der Implementierung, wie dies funktioniert, wollen wir uns kurz anschauen, wie unsere beforeEnter Haken passt in unsere bestehende Strecken-Datei. Nachfolgend haben wir unsere Beispiel-Routen-Datei, die unsere geschützten route, treffend benannt geschützt. Zu diesem fügen wir unsere beforeEnter Haken, um es so auf:

const router = new VueRouter({
Routen: [

{
Pfad: “/geschützt”,
name: “geschützt”,
Komponente: import(/* webpackChunkName: “geschützt” */ ‘./Geschützt.vue’),
beforeEnter(an, von, next) {
// Logik hier
}
]
})
Anatomie einer route

Die Anatomie einer beforeEnter ist nicht viel anders als die anderen verfügbaren Navigations-Wachen in Vue-Router. Sie akzeptiert drei Parameter: an, die “Zukunft” route der app ist die Navigation zu; von “aktuell/bald der Vergangenheit an” route der app ist die Navigation Weg und weiter, eine Funktion, die aufgerufen werden muss, die für die route zu beheben erfolgreich.

Im Allgemeinen, wenn mit Vue-Router, der nächste ist aufgerufen, ohne irgendwelche Argumente. Das setzt jedoch eine unbefristete Erfolg Stand. In unserem Fall wollen wir sicherstellen, dass nicht autorisierte Benutzer, die nicht geben Sie eine geschützte Ressource über einen alternativen Weg zu nehmen, leitet Sie entsprechend. Um dies zu tun, geben wir Sie in einem argument zum nächsten. Für diese verwenden wir den Namen der route zu navigieren die Benutzer, wenn Sie sind nicht, wie so:

nächste({
name: “dashboard”
})

Nehmen wir an, in unserem Fall, dass wir einen Vuex-Shop, wo wir speichern ein Benutzer die Autorisierungs-token. Um zu überprüfen, dass ein Benutzer über die Berechtigung verfügt, prüfen wir diese speichern und entweder fail oder pass, die route entsprechend.

beforeEnter(an, von, next) {
// prüfen, vuex-store //
if (store.get[“auth/hasPermission”]) {
die next () –
} else {
nächste({
name: “dashboard” // zurück in die Sicherheit der route //
});
}
}

Um zu gewährleisten, dass Ereignisse, die passieren in sync und dass die Strecke nicht vorzeitig laden, bevor die Vuex Aktion ist abgeschlossen, lasst uns wandeln unsere navigation Wachen zu verwenden async/await.

async beforeEnter(an, von, next) {
try {
var hasPermission = await-store.dispatch(“auth/hasPermission”);
wenn (hasPermission) {
die next () –
}
} catch (e) {
nächste({
name: “dashboard” // zurück in die Sicherheit der route //
})
}
}
Nie vergessen wo du herkommst

So weit unsere navigation guard erfüllt seinen Zweck der Verhinderung unbefugten Benutzern den Zugriff auf geschützte Ressourcen durch Umleitung Ihnen, wo Sie möglicherweise aus (d.h. die dashboard-Seite). Auch so, wie ein workflow stört. Seit der Umleitung ist unerwartet, ein Benutzer kann davon ausgehen, Benutzer Fehler und Versuch auf die route immer wieder mit der eventuellen Annahme, dass die Anwendung gebrochen ist. Um dies zu berücksichtigen, erstellen wir eine Möglichkeit, damit Benutzer wissen, Wann und warum Sie umgeleitet werden.

Wir können dies tun, indem Sie ein query-parameter an die nächste Funktion. Dies ermöglicht es uns, fügen Sie die geschützte Ressource Pfad zu der redirect-URL. Also, wenn Sie wollen, aufgefordert, ein Benutzer-Login in eine Anwendung oder erhalten Sie die richtigen Berechtigungen, ohne sich zu erinnern, wo Sie Sie verlassen haben, können Sie dies tun. Wir bekommen Zugang zu den Pfad der geschützten Ressource, über die die route-Objekt übergeben wird, in der beforeEnter Funktion etwa so: zu.fullPath.

async beforeEnter(an, von, next) {
try {
var hasPermission = await-store.dispatch(“auth/hasPermission”);
wenn (hasPermission) {
die next () –
}
} catch (e) {
nächste({
name: “anmelden”, // zurück in die Sicherheit der route //
Abfrage: { redirectFrom: zu.fullPath }
})
}
}
Benachrichtigung

Der nächste Schritt in der Verbesserung der workflow des Benutzers nicht auf einem geschützten Weg ist, um Ihnen eine Nachricht senden, damit Sie wissen von dem Fehler und wie man Sie lösen das Problem entweder, indem Sie sich einloggen oder den Erhalt der richtigen Berechtigungen). Für diese, können wir Sie verwenden in der Komponente-Wachen, insbesondere beforeRouteEnter, um zu überprüfen, ob eine Umleitung stattgefunden hat. Denn wir kamen in den redirect-Pfad als query parameter in der Routen-Datei können wir nun überprüfen Sie die route-Objekt um zu sehen, ob ein redirect passiert ist.

beforeRouteEnter(an, von, next) {
wenn (zu.Abfrage.redirectFrom) {
// do something //
}
}

Wie ich bereits erwähnt habe, ist die navigation Wachen müssen, rufen Sie nächste, um eine route zu lösen. Den Kopf an die nächste Funktion, wie wir bereits gesehen haben, ist, dass wir ein Objekt übergeben, um es. Was Sie vielleicht nicht wissen, ist, dass Sie können auch auf der Vue-Instanz innerhalb der nächsten Funktion. Wuuuuuuut? Hier ist was, das aussieht wie:

weiter(() => {
console.log(das) // dies ist die Vue-Instanz
})

Sie haben vielleicht bemerkt, dass Sie nicht technisch Zugriff auf die in diesem Umfang bei der Verwendung von beforeEnter. Wenn dies der Fall sein, können Sie immer noch Zugriff auf die Vue-Instanz, indem in der vm, um die Funktion so auf:

nächste(vm => {
console.log(vm) // dies ist die Vue-Instanz
})

Dies ist besonders praktisch, denn Sie können jetzt erstellen und entsprechend aktualisieren eines data-Eigenschaft mit der entsprechenden Fehlermeldung angezeigt, wenn eine route-redirect passiert. Angenommen, Sie haben eine data-Eigenschaft namens errorMsg. Sie können jetzt aktualisieren Sie diese Eigenschaft von der nächsten Funktion innerhalb Ihrer navigation Schutzeinrichtungen einfach und ohne zusätzliche Konfiguration. Mit diesem, Sie würden am Ende mit einer Komponente wie folgt:

<Vorlage>
<div>
<span>{{ errorMsg }}</span>
<!– einige andere lustige Inhalte –>

<!– einige andere lustige Inhalte –>
</div>
</template>
<script>
export default {
name: “Fehler”,
Daten() {
return {
errorMsg: null
}
},
beforeRouteEnter(an, von, next) {
wenn (zu.Abfrage.redirectFrom) {
nächste(vm => {
vm.errorMsg =
“Sorry, Sie haben nicht das Recht, den Zugang zum erreichen der gewünschten route”
})
} else {
die next () –
}
}
}
</script>

Fazit

Der Prozess der Integration der Authentifizierung in einer Anwendung kann eine knifflige Sache. Wir behandelt, wie man Tor eine route von unerlaubten Zugriff, als auch, wie man workflows, die Benutzer umleiten in Richtung und Weg von einer geschützten Ressource basierend auf Ihren Berechtigungen. Die Annahme war bisher, dass Sie bereits über Authentifizierung konfiguriert in Ihrer Anwendung. Wenn Sie noch nicht konfiguriert haben und möchten, dass Sie aufstehen und laufen schnell, ich empfehle das arbeiten mit Authentifizierung as a service. Es gibt Anbieter wie Netlify Identität Widget oder Auth0 Sperre.