Skydda Vue Rutter med Navigering Vakter

0
10

Autentisering är en nödvändig del av varje webbapplikation. Det är ett praktiskt sätt genom vilket vi kan anpassa erfarenheter och ladda innehåll specifikt anpassat till användaren som en inloggad staten. Det kan också användas för att utvärdera tillstånd, och förhindra på annat sätt privat information från åtkomst av obehöriga användare.

En vanlig metod som används i program för att skydda innehåll är att förvara dem under särskilda rutter och bygga omdirigera regler som användare navigera mot eller bort från en resurs beroende på deras behörigheter. Till gate innehåll på ett tillförlitligt sätt bakom skyddade vägar, som de behöver för att bygga till separata statiska sidor. Detta sätt att omdirigera regler kan korrekt hantera omdirigeringar.

I händelse av en Enda Sida Tillämpningar (Spa) byggt med modern front-end ramverk, som Vue, omdirigera regler inte kan användas för att skydda vägar. Eftersom alla sidor serveras från en enda fil från en webbläsare perspektiv, det är bara en sida: index.html. I SPA -, rutt logik i allmänhet härrör från en ruttfil. Det är där vi kommer att göra de flesta av våra auth konfiguration för det här inlägget. Vi kommer särskilt att luta dig mot Vue navigering vakter för att hantera autentisering särskilda routing eftersom detta hjälper oss att få tillgång utvalda sträckor innan det helt och hållet löser. Låt oss gräva i för att se hur detta fungerar.

Rötter och Rutter

Navigering vakter är en särskild funktion inom Vue Router som ger ytterligare funktionalitet avseende hur rutterna får lösas. De används främst för att hantera fel stater och navigera en användare sömlöst utan att abrupt avbryta sitt arbetsflöde.

Det finns tre huvudsakliga kategorier av vakter i Vue Router: Global Vakter, Per Rutt Vakter och Komponent Vakter. Som namnen antyder, Global Vakter kallas när någon navigering aktiveras (dvs när Webbadresser ändra) Per Rutt Vakter kallas när de tillhörande rutten kallas (det vill säga när en URL som matchar en specifik rutt), och Komponent Vakter kallas när en komponent i en rutt skapas, uppdateras eller förstöras. Inom varje kategori, det finns ytterligare metoder som ger dig mer finkornig kontroll av ansökan rutter. Här är en snabb nedbrytning av alla tillgängliga metoder inom varje typ av navigering vakt i Vue Router.

Global Vakter

  • beforeEach: åtgärder innan någon rutt (ingen tillgång till denna omfattning)
  • beforeResolve: åtgärd innan navigeringen är bekräftat, men efter att i-komponent vakter (samma som beforeEach med denna omfattning tillgång)
  • afterEach: åtgärder efter sträckan löser (kan inte påverka navigering)

Per Rutt Vakter

  • beforeEnter: åtgärder innan en specifik rutt (till skillnad från global vakter, här har tillgång till detta)

Komponent Vakter

  • beforeRouteEnter: åtgärd innan navigationen är bekräftat, och innan komponent skapande (ingen tillgång till denna)
  • beforeRouteUpdate: action när en ny rutt har kallats som använder samma komponent
  • beforeRouteLeave: åtgärder innan du lämnar en rutt

Skydda Rutter

Att genomföra dem på ett effektivt sätt, hjälper det att veta när man ska använda dem i varje given situation. Om du vill spåra sidvisningar för analytics till exempel, kanske du vill använda den globala afterEach vakt, eftersom det får sparken när rutten och tillhörande komponenter är helt löst. Och om du ville prefetch uppgifter för att ladda på en Vuex butiken innan en rutt löser problemet kan du göra det med hjälp av den beforeEnter per rutt vakt.

Eftersom vårt exempel handlar om att skydda specifika rutter baserat på användarens behörigheter, för vi kommer att använda i komponenten navigering vakter, nämligen beforeEnter krok. Detta navigering guard ger oss tillgång till en korrekt rutt innan den lösa klar, vilket innebär att vi kan hämta data eller kontrollera att uppgifterna har fyllts på innan du låter en användare passera. Innan dykning i genomförandet information om hur detta fungerar, låt oss kort titta på hur våra beforeEnter krok som passar in i våra befintliga linjer fil. Nedan har vi våra prov rutter-fil, vilken har våra skyddade vägen, med det passande namnet är skyddat. Detta kommer vi lägga till vår beforeEnter krok till det som så:

const routern = new VueRouter({
rutter: [

{
sökväg: “/skyddad”,
namn: “skyddade”,
komponent: import(/* webpackChunkName: “skyddade” */ ‘./Skyddade.vue’),
beforeEnter(till, från, next) {
// logik här
}
]
})
Anatomi av en rutt

Anatomin av en beforeEnter är inte mycket annorlunda från andra tillgängliga navigering vakter i Vue Router. Det accepterar tre parametrar: att, “framtiden” route appen är att navigera till, från, “current/snart förbi” route appen är att navigera bort från och med nästa, en funktion som ska kallas till vägen för att lösa problem.

I allmänhet, när du använder Vue Router, nästa heter utan några argument. Detta förutsätter dock en evig framgång staten. I vårt fall vill vi se till att obehöriga användare som inte anger en skyddad resurser har en alternativ väg att ta som leder dem på rätt sätt. För att göra detta, vi kommer att passera i ett argument till nästa. För detta kommer vi använda namnet på den rutt du vill navigera användare om att de är obehöriga som så:

nästa({
namn: “instrumentpanelen”
})

Låt oss anta att det i vårt fall att vi har en Vuex butik där vi lagrar användarens godkännande token. För att kontrollera att användaren har behörighet, vi kommer att kontrollera denna butik och antingen misslyckas eller passera vägen på lämpligt sätt.

beforeEnter(till, från, next) {
// kolla vuex lagra //
om (butik.get[“auth/hasPermission”]) {
nästa()
} else {
nästa({
namn: “instrumentpanelen” // tillbaka till säkerheten rutt //
});
}
}

För att säkerställa att händelser inträffar i synk och att rutten inte i förtid ladda innan Vuex åtgärder är klar, låt oss konvertera våra navigering vakter för att använda asynkron/väntar.

async beforeEnter(till, från, next) {
try {
var hasPermission = väntar butik.dispatch(“auth/hasPermission”);
om (hasPermission) {
nästa()
}
} catch (e) {
nästa({
namn: “instrumentpanelen” // tillbaka till säkerheten rutt //
})
}
}
Glöm aldrig var du kommer från

Så långt våra navigering vakt uppfyller sitt syfte för att förhindra att obehöriga användare att få tillgång till skyddade resurser genom att omdirigera dem till där de kan ha kommit från (dvs instrumentpanelen). Även så, att ett sådant flöde är störande. Sedan omdirigera är oväntade, en användare kan anta att användare av misstag och försök att öppna vägen upprepade gånger med den slutliga antagandet att programmet är bruten. För att beakta detta, låt oss skapa ett sätt att låta användarna vet när och varför de omdirigeras.

Vi kan göra detta genom att skicka in en fråga parameter till nästa funktion. Detta tillåter oss att lägga till den skyddade resurs väg att omdirigera URL. Så, om du vill att uppmana användaren att logga in på en ansökan eller få rätt behörighet utan att behöva komma ihåg var de slutade, du kan göra så. Vi kan få tillgång till sökvägen för den skyddade resurs via route objekt som förs in i beforeEnter fungerar som så: att.fullPath.

async beforeEnter(till, från, next) {
try {
var hasPermission = väntar butik.dispatch(“auth/hasPermission”);
om (hasPermission) {
nästa()
}
} catch (e) {
nästa({
namn: “logga in”, // tillbaka till säkerheten rutt //
fråga: { redirectFrom: att.fullPath }
})
}
}
Anmälan

Nästa steg i arbetet med att förbättra arbetsflöde för en användaren misslyckas med att få tillgång till ett skyddat väg är att skicka dem ett meddelande låta dem veta att felet är och hur de kan lösa problemet (antingen genom att logga in eller för att få rätt behörighet). För detta kan vi använda komponenten vakter, specifikt, beforeRouteEnter, för att kontrollera om en omdirigering har hänt. Eftersom vi gick i omdirigera sökvägen som en frågeparameter i våra rutter fil, vi kan nu kolla rutten objekt för att se om en omdirigering har hänt.

beforeRouteEnter(till, från, next) {
om (att.fråga.redirectFrom) {
// gör någonting //
}
}

Som jag nämnde tidigare, alla navigering vakter måste ringa nästa för att en väg att lösa. Den upp till nästa funktion som vi såg tidigare, är att vi kan skicka ett objekt till det. Vad du kanske inte visste är att du kan även få tillgång till de Vue exempel inom nästa funktion. Wuuuuuuut? Här är vad som ser ut som:

nästa(() => {
konsolen.logga in(detta), / / detta är Vue exempel
})

Du kanske har märkt att du inte tekniskt har tillgång till denna möjlighet när man använder beforeEnter. Även om detta kan vara fallet, kan du fortfarande komma åt Vue exempel genom att skicka med i vm den fungerar som så:

nästa vm (=> {
konsolen.log(vm) // här är de Vue exempel
})

Detta är särskilt praktiskt eftersom du kan nu skapa och korrekt uppdatering av data egendom med relevanta felmeddelande när en rutt omdirigera händer. Säg att du har en data egenskap som kallas errorMsg. Du kan nu uppdatera denna egendom nästa funktion i din navigering vakter enkelt och utan någon ytterligare konfiguration. Med hjälp av detta, skulle du sluta med en komponent så här:

<mall>
<div>
<span>{{ errorMsg }}</span>
<!– några andra roliga content –>

<!– några andra roliga content –>
</div>
</template>
<script>
export standard {
namn: “Error”,
data() {
return {
errorMsg: null
}
},
beforeRouteEnter(till, från, next) {
om (att.fråga.redirectFrom) {
nästa vm (=> {
vm.errorMsg =
“Tyvärr, du har inte rätt tillgång för att nå vägen begärt”
})
} else {
nästa()
}
}
}
</script>

Slutsats

Processen med att integrera autentisering in en ansökan kan vara en knepig en. Vi diskuterade hur man gate en rutt från obehörig åtkomst samt hur man lägger arbetsflöden på plats för att dirigera om användare mot och bort från en skyddad resurs baserad på deras behörigheter. Antagandet har hittills varit att du redan har konfigurerat för verifiering i din ansökan. Om du ännu inte har denna konfigurerad och du vill komma igång snabbt, så rekommenderar jag att arbeta med autentisering som en tjänst. Det finns leverantörer som Netlify Identitet Widget eller Auth0 s-lås.