Angular Academy · Lektion

Route guards

Skydda routes med guards.

Lektion 2 av 310 steg

Route guards är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 3 lektioner.

Route guards i Angular

Den här lektionen förklarar hur du skyddar routes i Angular-applikationer med route guards.

Route guards — illustration 1

Vad är route guards?

Route guards styr åtkomsten till routes i Angular. De är användbara för att skydda känsliga eller begränsade routes.

Typer av guards

  • CanActivate: Avgör om en route kan aktiveras.
  • CanActivateChild: Skyddar underordnade routes.
  • CanDeactivate - Kontrollerar innan en route lämnas.
  • Resolve - Förhämtar data innan routen aktiveras.

Skapa en guard

Skapa en guard med Angular CLI:

ng generate guard auth

Implementera canActivate()

Metoden canActivate() styr åtkomsten till routen:

canActivate(): boolean {
  return true; // or false to block navigation
}

Använda guards i routes

Lägg till guards i routes i routingmodulen:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

CanDeactivate-guard

CanDeactivate förhindrar att en route lämnas om vissa villkor inte är uppfyllda, vilket är användbart för formulär:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Resolve-guard

Resolve-guarden hämtar data innan en route läses in:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Sammanfattning

Du har lärt dig att skydda och förbättra navigeringen i dina Angular-appar med route guards. Fortsätt så!

Route guards — illustration 10
Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
38
Lektioner
144

Vanliga frågor

Är lektionen ”Route guards” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Route guards”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Route guards”?

Skydda routes med guards. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.

Hur lång tid tar lektionen ”Route guards”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Konfigurera routes
  2. Route guards
  3. Lazy loading av moduler
← Tillbaka till Angular Academy