Guard im Angular

Einführung

In diesem Artikel erfahren Sie, wie Sie Schutzvorrichtungen mit Angular 17 verwenden. Mit Schutzvorrichtungen können Sie Routen schützen und bestimmte Bedingungen überprüfen, bevor Sie den Zugriff auf eine bestimmte Route zulassen.

Was ist ein Funktionswächter?

Ein funktionaler Schutz in Angular ist eine Funktion, die dazu dient, die Navigation zu einer Route abzufangen und möglicherweise zu blockieren. Mit Angular 17 verwenden Sie CanActivateFn, um funktionale Schutzvorrichtungen zu erstellen.

Codebeispiel

Hier ist ein Beispiel für einen funktionierenden authGuard:

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  } else {
    router.navigate(['/login']);
    return false;
  }
};

Verwendung der Wache

Um diesen Guard zu verwenden, müssen Sie ihn in Ihrem Routing-Modul mit „provideRouter“ und „withGuards“ konfigurieren:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withGuards } from '@angular/router';
import { AppComponent } from './app/app.component';
import { authGuard } from './app/guards/auth.guard';

const routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withGuards())
  ]
}).catch(err => console.error(err));

Code-Erklärung

• CanActivateFn: Ein Typ, der eine Schutzfunktion darstellt.
• inject: Funktion zum Einfügen von Abhängigkeiten wie Diensten.
• Router: Routing-Dienst zur Navigation zu anderen Routen.
• authGuard: Schutzfunktion, die prüft, ob der Benutzer authentifiziert ist.

Abschluss

Funktionale Wächter in Angular 17 bieten eine flexible und leistungsstarke Möglichkeit, Routen zu schützen und Berechtigungen zu verwalten. Sie sind besonders nützlich für Aufgaben wie Authentifizierung und Zugriffskontrolle.

Weitere Einzelheiten finden Sie in der offiziellen Angular-Dokumentation zu Guards【20†Quelle】【22†Quelle】【23†Quelle】.

Das obige ist der detaillierte Inhalt vonGuard im Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!