Beskytte Vue Ruter med Navigasjon Vakter

0
37

Godkjenning er en nødvendig del av ethvert web-applikasjon. Det er et nyttig middel som vi kan tilpasse erfaringer og last inn innhold som er spesifikke for en bruker — som en som er logget i staten. Det kan også brukes til å vurdere tillatelser, og hindre ellers privat informasjon fra å bli åpnet av uautoriserte brukere.

En felles praksis som programmer bruker til å beskytte innholdet er til å huse dem under bestemte ruter og bygge omdirigere regler som brukere navigere mot eller bort fra en ressurs, avhengig av deres tillatelser. Å gate innhold pålitelig bak beskyttet ruter, de trenger for å bygge egen statiske sider. På denne måten, omdirigere regler kan riktig håndtere omdirigeringer.

I tilfelle av Én Side Programmer (SPAs) bygget med moderne front-end rammeverk, som Vue, omdirigere regler kan ikke benyttes til å beskytte ruter. Fordi alle sidene blir servert fra en enkelt oppføring fil, fra en nettleser perspektiv, er det bare én side: index.html. I et SPA, rute logikk generelt stammer fra en ruter fil. Dette er hvor vi vil gjøre de fleste av våre auth konfigurasjon for dette innlegget. Vi vil spesielt lene seg på Vue navigation vakter for å håndtere autentisering bestemt ruting siden dette hjelper oss til å få tilgang til utvalgte ruter før det fullt løser. La oss grave i å se hvordan dette fungerer.

Røtter og Ruter

Navigasjon vakter er en bestemt funksjon i Vue Ruter som gir ekstra funksjonalitet knyttet til hvordan rutene få løst. De er primært brukes til å håndtere feil stater og navigere en bruker sømløst uten brått avbryte sin arbeidsflyt.

Det er tre hovedkategorier av vakter i Vue Ruter: Global Vakter, Per Rute Vakter og I Komponent-Vakter. Som navnene antyder, Global Vakter blir kalt når en navigasjon er utløst (dvs. når Nettadresser endre), Per Rute Vakter er kalt når forbundet ruten kalles (dvs. når en URL passer til en bestemt rute), Komponent og Vakter er kalt når en komponent i en rute er opprettet, oppdatert eller ødelagt. Innen hver kategori, er det flere metoder som gir deg mer finkornet kontroll av programmet ruter. Her er en rask bryte ned av alle tilgjengelige metoder innen hver type navigasjon vakt i Vue Ruter.

Global Vakter

  • beforeEach: handling før du går inn i noen rute (ingen tilgang til denne scope)
  • beforeResolve: handling før navigasjonen er bekreftet, men etter i-komponent vakter (samme som beforeEach med dette omfanget tilgang)
  • afterEach: handling etter at ruten løser (kan påvirke navigasjon)

Per Rute Vakter

  • beforeEnter: handling før du skriver inn en bestemt rute (i motsetning til global vakter, dette har tilgang til dette)

Komponent Vakter

  • beforeRouteEnter: handling før navigasjon er bekreftet, og før opprettelse komponent (ingen tilgang til denne)
  • beforeRouteUpdate: handling etter en ny rute som har blitt kalt som bruker den samme komponenten
  • beforeRouteLeave: handling før du forlater en rute

Beskytte Ruter

For å implementere dem effektivt, det hjelper å vite når du skal bruke dem i en gitt situasjon. Hvis du ønsker å spore sidevisninger for analytics for eksempel, ønsker du kanskje å bruke den globale afterEach vakt, siden det blir avfyrt når ruten og tilhørende komponenter er helt løst. Og hvis du ønsket å forhåndshenting av data til å laste ned en Vuex butikken før en rute løser, kan du gjøre det ved å bruke beforeEnter per rute vakt.

Siden vårt eksempel avtaler med for å beskytte spesifikke ruter basert på en brukers tilgangsrettigheter, vil vi bruke i komponenten navigasjon vakter, nemlig beforeEnter kroken. Dette navigasjon guard gir oss tilgang til riktig rute før den løse fullfører; noe som betyr at vi kan hente data eller sjekk at data er lastet inn før du lar en bruker passere gjennom. Før dykking i gjennomføringen informasjon om hvordan dette fungerer, la oss kort se på hvordan våre beforeEnter kroken passer inn i vår eksisterende ruter fil. Nedenfor har vi vårt utvalg av ruter-fil, som har vår beskyttet rute, treffende kalt beskyttet. Til dette, vil vi legge til vår beforeEnter kroken til det som så:

const ruter = new VueRouter({
ruter: [

{
banen: “/beskyttet”,
navn: “beskyttet”,
komponent: import(/* webpackChunkName: “beskyttet” */ ‘./Beskyttet.vue’),
beforeEnter(til, fra, neste) {
// logikk her
}
]
})
Anatomi av en rute

Anatomien av en beforeEnter er ikke mye forskjellig fra andre tilgjengelige navigasjon vakter i Vue Ruter. Det aksepterer tre parametre: å, “fremtiden” rute appen er å navigere til, fra, “current/snart forbi” rute appen er å navigere bort fra og neste, en funksjon som må kalles for ruten for å løse vellykket.

Vanligvis, når du bruker Vue Ruter, neste er kalt uten noen argumenter. Imidlertid forutsetter dette en evigvarende suksess staten. I vårt tilfelle ønsker vi å sikre at uautoriserte brukere som ikke klarer å gå inn i et beskyttet ressurser har en alternativ vei til å ta som leder dem på riktig måte. For å gjøre dette, vil vi passere i et argument til neste. For dette, vil vi bruke navnet på ruten for å navigere brukere hvis de er uautorisert som så:

neste({
navn: “dashboard”
})

La oss anta at i vårt tilfelle, er at vi har en Vuex butikk hvor vi lagrer brukerens autorisasjon token. For å sjekke at brukeren har tillatelse, vil vi sjekke dette store og enten mislykkes eller pass-ruten på riktig måte.

beforeEnter(til, fra, neste) {
// sjekk vuex butikk //
hvis (lagre.getters[“auth/hasPermission”]) {
neste()
} else {
neste({
navn: “dashboard” // tilbake til sikkerhet rute //
});
}
}

For å sikre at hendelser skjer i sync og at ruten ikke for tidlig inn før Vuex handlingen er fullført, la oss konvertere våre navigasjon vakter for å bruke async/await.

asynkron beforeEnter(til, fra, neste) {
try {
var hasPermission = venter store.utsendelse(“auth/hasPermission”);
hvis (hasPermission) {
neste()
}
} catch (e) {
neste({
navn: “dashboard” // tilbake til sikkerhet rute //
})
}
}
Aldri glem hvor du kom fra

Så langt våre navigasjon vakt oppfyller formålet om å hindre at uautoriserte brukere får tilgang til beskyttede ressurser ved å omdirigere dem der de kan ha kommet fra (dvs. dashbordet side). Selv så, en arbeidsflyt er forstyrrende. Siden redirect er uventet, en bruker kan anta bruker feil og prøver å få tilgang til ruten flere ganger med eventuell antakelse om at programmet er brutt. For å ta høyde for dette, la oss lage en måte å la brukerne få vite når og hvorfor de blir omdirigert.

Vi kan gjøre dette ved å passere i en søkeparameter til neste funksjon. Dette gir oss muligheten til å legge beskyttet ressurs-banen til omdirigerings-URL-en. Så, hvis du ønsker å be en bruker til å logge deg inn i et program, eller få tak i den riktige tillatelser uten å huske hvor de slapp, og du kan gjøre det. Vi kan få tilgang til banen av beskyttet ressurs via rute objekt som er gått inn i beforeEnter funksjon som så: hvis du vil.fullPath.

asynkron beforeEnter(til, fra, neste) {
try {
var hasPermission = venter store.utsendelse(“auth/hasPermission”);
hvis (hasPermission) {
neste()
}
} catch (e) {
neste({
navn: “logg inn”, // tilbake til sikkerhet rute //
spørring: { redirectFrom: å.fullPath }
})
}
}
Varsle

Det neste trinnet i å forbedre arbeidsflyten for en bruker å mislykkes i å få tilgang til en beskyttet rute er å sende dem en melding om feil og hvordan de kan løse problemet (enten ved å logge inn eller å skaffe de nødvendige tillatelsene). For dette, kan vi gjøre bruk av i-komponent vakter, spesielt, beforeRouteEnter, for å kontrollere hvorvidt en redirect har skjedd. Fordi vi gikk i redirect banen som en søkeparameter i våre ruter-fil, har vi nå kan du sjekke ruten objekt for å se om en redirect skjedde.

beforeRouteEnter(til, fra, neste) {
hvis (å.søket.redirectFrom) {
// gjør noe //
}
}

Som jeg nevnte tidligere, alle navigasjon vakter må ringe neste for en rute for å løse. Oppsiden til neste funksjon som vi så tidligere, er at vi kan passere et objekt til det. Det du kanskje ikke visste er at du også kan få tilgang til Vue eksempel innen neste funksjon. Wuuuuuuut? Her er hva som ser ut som:

neste(() => {
– konsollen.logg(denne) // dette er Vue eksempel
})

Du har kanskje lagt merke til at du ikke teknisk sett har tilgang til dette omfang når du bruker beforeEnter. Selv om dette kan være tilfelle, kan du fortsatt få tilgang til Vue eksempel ved bestått i vm til funksjonen som så:

neste(vm => {
– konsollen.logg(vm) // dette er Vue eksempel
})

Dette er spesielt nyttig fordi du kan nå opprette og hensiktsmessig oppdatere data eiendom med relevant feilmelding når en rute omdirigere skjer. Si at du har en data eiendom kalt errorMsg. Du kan nå oppdatere denne eiendommen fra den neste funksjonen i din navigasjon vakter enkelt og uten noen ekstra konfigurasjon. Ved hjelp av denne, vil du ende opp med en komponent som dette:

<mal>
<div>
<span>{{ errorMsg }}</span>
<!– noen andre morsomme innhold –>

<!– noen andre morsomme innhold –>
</div>
</template>
<script>
eksport standard {
navn: “Feil”,
data() {
tilbake {
errorMsg: null
}
},
beforeRouteEnter(til, fra, neste) {
hvis (å.søket.redirectFrom) {
neste(vm => {
vm.errorMsg =
“Beklager, du har ikke rett adgang til å nå rute ba”
})
} else {
neste()
}
}
}
</script>

Konklusjon

Prosessen med å integrere godkjenning i et program kan være en vanskelig en. Vi dekket hvordan gate en rute fra uautorisert tilgang, så vel som hvordan å sette arbeidsflyter i sted at omdirigere brukere mot og bort fra en beskyttet ressurs basert på deres rettigheter. Forutsetningen er dermed langt er at du allerede har godkjenning konfigurert i din søknad. Hvis du ennå ikke har denne konfigurert, og du vil få opp og kjører fort, jeg anbefaler å jobbe med godkjenning som en tjeneste. Det er tilbydere som Netlify Identitet Widget eller Auth0 s-lås.