Guard dans Angular

pengenalan

Dalam artikel ini, kami akan meneroka cara menggunakan pengawal dengan Angular 17. Pengawal membenarkan anda melindungi laluan dan menyemak syarat tertentu sebelum membenarkan akses ke laluan tertentu.

Apakah Pengawal Fungsian?

Pengawal berfungsi dalam Angular ialah fungsi yang digunakan untuk memintas dan berpotensi menyekat navigasi ke laluan. Dengan Angular 17, anda menggunakan CanActivateFn untuk mencipta pengawal berfungsi.

Contoh Kod

Berikut ialah contoh authGuard berfungsi:

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;
  }
};

Menggunakan Pengawal

Untuk menggunakan pengawal ini, anda mesti mengkonfigurasinya dalam modul penghalaan anda menggunakan provideRouter dan withGuards:

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));

Penerangan Kod

• CanActivateFn: Jenis yang mewakili fungsi pengawal.
• inject: Berfungsi untuk menyuntik kebergantungan seperti perkhidmatan.
• Penghala: Perkhidmatan penghalaan untuk menavigasi ke laluan lain.
• authGuard: Fungsi pengawal menyemak sama ada pengguna disahkan.

Kesimpulan

Pengawal berfungsi dalam Angular 17 menyediakan cara yang fleksibel dan berkuasa untuk melindungi laluan dan mengurus kebenaran. Ia amat berguna untuk tugas seperti pengesahan dan kawalan akses.

Untuk butiran lanjut, lihat dokumentasi Sudut rasmi mengenai pengawal【20†sumber】【22†sumber】【23†sumber】.

Atas ialah kandungan terperinci Guard dans Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!