Bescherming van de Vue Routes met Navigatie Bewakers

0
42

Verificatie is een noodzakelijk onderdeel van elke web applicatie. Het is een handig middel waarmee we kunnen personaliseren, ervaringen en laden van materiaal dat specifiek op een door de gebruiker, zoals een geregistreerd in staat. Het kan ook worden gebruikt om te evalueren, machtigingen, en te voorkomen dat anders is privé informatie van toegang door onbevoegde gebruikers.

Een veel voorkomende praktijk dat toepassingen te gebruiken om inhoud te beschermen is om ze huis in het kader van specifieke routes en bouwen redirect regels die gebruikers navigeren in de richting of weg van een resource, afhankelijk van hun machtigingen. Aan de poort inhoud betrouwbaar achter beschermd routes, die ze nodig hebben om te bouwen aan een aparte statische pagina ‘ s. Op deze manier redirect rules goed kunnen afhandelen omleidingen.

In het geval van Enkele Pagina Toepassingen (Sbz ‘ s) gebouwd met moderne front-end kaders, zoals Vue, redirect regels kunnen niet worden gebruikt om te beschermen routes. Omdat alle pagina ‘ s worden in de vorm van een single-entry-bestand in een browser is perspectief, er is slechts één pagina: index.html. In een SPA, route logica in het algemeen het gevolg van een routes bestand. Dit is waar we het meeste van onze auth configuratie voor deze post. Zullen We dan ook nadrukkelijk leunen op Vue de navigatie bewakers om authenticatie af te handelen specifieke routing sinds dit helpt ons de toegang tot geselecteerde routes voordat het volledig is opgelost. Laten we graven in om te zien hoe dit werkt.

Roots en Routes

Navigatie bewakers zijn een specifieke functie binnen Vue Router die aanvullende functionaliteit met betrekking tot de routes opgelost. Ze worden voornamelijk gebruikt voor het verwerken van fouten en het navigeren van een gebruiker naadloos en zonder abrupt te onderbreken hun workflow.

Er zijn drie hoofdcategorieën van de bewakers in Vue Router: Global Bewakers, Per Route Bewakers en Onderdeel van de Bewakers. Zoals de namen al doen vermoeden, Global Guards worden genoemd wanneer de navigatie is geactiveerd (d.w.z. als Url ‘ s te wijzigen), Per Route Guards worden genoemd wanneer de bijbehorende route is genoemd (dat wil zeggen wanneer een URL overeenkomt met een specifieke route) en Component-Guards worden genoemd als een component in een route wordt gecreëerd, gewijzigd of vernietigd. Binnen elke categorie zijn er andere methoden, die geeft je meer verfijnde controle over de toepassing van routes. Hier is een snelle afbraak van alle beschikbare methoden binnen elk type navigatie guard in Vue Router.

Global Bewakers

  • beforeEach: actie voor het invoeren van een route (geen toegang tot deze scope)
  • beforeResolve: actie voor de navigatie is bevestigd, maar na een component bewakers (dezelfde als beforeEach met dit toepassingsgebied toegang)
  • afterEach: actie nadat de route is opgelost (niet van invloed op de navigatie).

Per Route Bewakers

  • beforeEnter: actie voor het invoeren van een bepaalde route (in tegenstelling tot de globale bewakers, dit heeft toegang tot deze)

Onderdeel Bewakers

  • beforeRouteEnter: actie voor navigatie is bevestigd, en voordat component creatie (geen toegang tot deze)
  • beforeRouteUpdate: actie na een nieuwe route is genoemd dat gebruik maakt van dezelfde component
  • beforeRouteLeave: actie voor het verlaten van een route

Bescherming Van De Routes

Om ze te implementeren effectief, het helpt om te weten wanneer ze te gebruiken in een bepaald scenario. Als je wilde track pageviews voor analytics bijvoorbeeld, wilt u misschien gebruik maken van de global afterEach guard, omdat het wordt geactiveerd wanneer de route en de bijbehorende componenten zijn volledig opgelost. En als je wilde prefetch gegevens te laden op een Vuex op te slaan voordat u een route verhelpt u dit kunnen doen met behulp van de beforeEnter per route guard.

Sinds ons voorbeeld behandelt het beschermen van specifieke routes op basis van de toegang van een gebruiker machtigingen, zullen we gebruik maken van de component – navigatie bewakers, namelijk de beforeEnter haak. Dit navigatie-guard geeft ons toegang tot de juiste route voor het oplossen voltooid; wat betekent dat wij kunnen het ophalen van gegevens of controleren van de gegevens geladen voordat het verhuren van een gebruiker passeren. Voor het duiken in de uitvoering de details van hoe dit werkt, laten we even kijken naar hoe onze beforeEnter haak past in onze bestaande routes bestand. Hieronder hebben we onze steekproef routes-bestand, die ons beschermde route, toepasselijke naam beschermd. Wij voegen onze beforeEnter haak om het zo:

const router = nieuwe VueRouter({
routes: [

{
path: /beschermd”,
naam: “beveiligd”,
onderdeel: import(/* webpackChunkName: “beschermd” */ ‘./Beschermd.vue’),
beforeEnter(aan, uit, volgende) {
// logica hier
}
]
})
Anatomie van een route

De anatomie van een beforeEnter is niet veel verschillend van andere beschikbare navigatie bewakers in Vue Router. Deze drie parameters accepteert: naar de “toekomst” route de app navigeren is; van de “huidige/snel afgelopen” route de app navigeren, en de volgende, een functie die moet worden aangeroepen voor de route op te lossen met succes.

Over het algemeen, wanneer er gebruik wordt Vue Router, volgende wordt aangeroepen zonder enige argumenten. Echter, dit veronderstelt een voortdurende succes staat. In ons geval willen we ervoor zorgen dat onbevoegde gebruikers, die niet invoeren van een beschermde bronnen hebben een alternatieve weg die leidt deze op de juiste wijze. Om dit te doen, zullen we in een pleidooi voor het volgende. Voor deze, zullen we gebruik maken van de naam van de route te navigeren gebruikers als ze niet zijn goedgekeurd als volgt:

naast({
naam: “dashboard”
})

Laten we aannemen dat in ons geval, dat we een Vuex winkel waar we slaan een gebruiker autorisatie. Om te controleren of een gebruiker rechten heeft, dan controleren wij deze winkel en mislukken of langs de route op de juiste wijze.

beforeEnter(aan, uit, volgende) {
// check vuex store //
als (winkel.getters[“auth/hasPermission”]) {
next()
} else {
naast({
naam: “dashboard” // terug naar de veiligheid route //
});
}
}

Om ervoor te zorgen dat gebeurtenissen in sync en dat de route niet voortijdig wordt geladen voordat de Vuex actie is voltooid, we zetten onze navigatie bewakers gebruik van async/wachten.

async beforeEnter(aan, uit, volgende) {
proberen {
var hasPermission = wachten op opslaan.verzending(“auth/hasPermission”);
als (hasPermission) {
next()
}
} catch (e) {
naast({
naam: “dashboard” // terug naar de veiligheid route //
})
}
}
Vergeet nooit waar je vandaan kwam

Tot zover onze navigatie guard aan zijn doel om te voorkomen dat onbevoegde gebruikers toegang tot beschermde bronnen door doorstuurt naar waar ze vandaan komen (d.w.z. de pagina dashboard). Zelfs zo, zo een workflow is storend. Sinds de omleiding is onverwacht, een gebruiker mag uitgaan van een fout van de gebruiker en probeert toegang te krijgen tot de route herhaaldelijk met de eventuele aanname dat de aanvraag is gebroken. Om rekening te houden met deze, laten we een manier om de gebruikers te laten weten wanneer en waarom ze worden omgeleid.

Dit kunnen We doen door in een query parameter naar de volgende functie. Dit stelt ons in staat om toe te voegen beschermde bronnen pad naar de omleidings-URL. Dus, als u wilt dat een gebruiker wordt gevraagd om in te loggen op een toepassing of het verkrijgen van de juiste machtigingen zonder te herinneren waar ze was gebleven, kunt u dit doen. We kunnen toegang krijgen tot het pad van de beschermde bronnen via de route object dat wordt doorgegeven in de beforeEnter functie zoals: te.fullPath.

async beforeEnter(aan, uit, volgende) {
proberen {
var hasPermission = wachten op opslaan.verzending(“auth/hasPermission”);
als (hasPermission) {
next()
}
} catch (e) {
naast({
naam: “login”, // terug naar de veiligheid route //
query: { redirectFrom: aan.fullPath }
})
}
}
Kennisgeving

De volgende stap in het verbeteren van de workflow van een gebruiker faalt om toegang te krijgen tot een beschermde route is een bericht sturen hen te laten weten van de fout en hoe ze het kunnen oplossen van het probleem (door het inloggen of het verkrijgen van de juiste machtigingen). Hiervoor kunnen we gebruik maken van de component-bewakers, specifiek, beforeRouteEnter, om te controleren of een redirect is gebeurd. Want we passeerden in de redirect pad als een query parameter in onze routes bestand, we kunnen nu controleren de route object te zien als een redirect is gebeurd.

beforeRouteEnter(aan, uit, volgende) {
als (tot.query.redirectFrom) {
// do something //
}
}

Zoals ik eerder heb gezegd, alle navigatie-afschermingen met blokkeervoorziening moeten bellen volgende om een route op te lossen. De ondersteboven aan de volgende functie zoals we eerder al zagen, is dat we het kunnen doorgeven van een object aan. Wat jullie misschien nog niet wisten is dat je ook toegang tot de Vue instantie binnen de volgende functie. Wuuuuuuut? Hier is hoe dat eruit ziet:

naast(() => {
console.log in(deze) // dit is de Vue exemplaar
})

Je hebt misschien gemerkt dat je niet technisch toegang hebben tot deze scope bij het gebruik van beforeEnter. Hoewel dit het geval is, kunt u nog steeds toegang tot de Vue, bijvoorbeeld door het passeren in de vm naar de functie als volgt:

naast(vm => {
console.log(vm) // dit is de Vue exemplaar
})

Dit is vooral handig omdat je nu kunt maken en op de juiste update een eigenschap data met de relevante foutbericht weergegeven wanneer er een route redirect gebeurt. Stel je hebt een gegevens-eigenschap met de naam errorMsg. U kunt nu de update van deze eigenschap van de volgende functie binnen uw navigatie bewakers gemakkelijk en zonder toegevoegde configuratie. Met behulp van deze, je zou eindigen met een onderdeel, zoals deze:

<sjabloon>
<div>
<span>{{ errorMsg }}</span>
<!– een aantal andere leuke content –>

<!– een aantal andere leuke content –>
</div>
</template>
<script>
export standaard {
naam: “Error”,
gegevens() {
terug {
errorMsg: null
}
},
beforeRouteEnter(aan, uit, volgende) {
als (tot.query.redirectFrom) {
naast(vm => {
vm.errorMsg =
“Sorry, u heeft niet het recht de toegang tot het bereiken van de route gevraagd”
})
} else {
next()
}
}
}
</script>

Conclusie

Het proces van het integreren van authenticatie in een toepassing kan een lastige. We vallen hoe poort, een route van onbevoegde toegang, evenals hoe om workflows in plaats dat gebruikers worden omgeleid in de richting van en afstand van een beveiligde bron, gebaseerd op hun rechten. De veronderstelling zo ver is dat je al verificatie is geconfigureerd in uw toepassing. Als u nog niet over deze geconfigureerd en u wilt snel aan de slag, ik beveel het werken met verificatie van een service. Er zijn aanbieders, zoals Netlify de Identiteit van een Widget of Auth0 op slot.