Analisis ringkas laluan pembelajaran sudut oleh Pengawal Laluan

Artikel ini akan membawa anda memahami Pengawal Laluan dalam Sudut, dan memperkenalkan kaedah mencipta pengawal laluan, mengawal sama ada laluan itu boleh diaktifkan dan mengawal sama ada laluan itu boleh dikeluarkan. Saya harap ia akan membantu semua orang !

Persekitaran:

• Angular CLI: 11.0.6

• Sudut: 11.0.7

• Nod: 12.18.3

• npm: 6.14.6

• IDE: Visual Studio Code

Dalam proses pembangunan perniagaan sebenar kami, kami sering menghadapi keperluan berikut:

• Kebolehcapaian URL tertentu perlu dihadkan, contohnya, untuk antara muka pengurusan sistem, hanya pengguna yang mempunyai hak pentadbir boleh membukanya. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

• Apabila pengguna berada dalam antara muka penyuntingan dan keluar tanpa menyimpan, pengguna perlu digesa sama ada untuk meninggalkan pengubahsuaian itu.

Mensasarkan senario di atas, Angualr menggunakan 路由守卫 (Pengawal Laluan) untuk melaksanakannya.

Pengawal Laluan

1 Cipta pengawal laluan

Angular CLI menyediakan alatan baris arahan yang boleh mencipta rangka kerja pengawal laluan dengan pantas fail: ng generate guard auth. Selepas pelaksanaan, Angular CLI akan bertanya kepada kami antara muka yang perlu kami laksanakan, kami hanya boleh menyemaknya secara langsung:

? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad

Penerangan:

• CanActivate: Mengawal sama ada laluan boleh diaktifkan

• CanActivateChild: Mengawal sama ada sub-laluan boleh diaktifkan

• CanDeactivate: Mengawal sama ada laluan boleh keluar

• CanLoad: Kawal sama ada modul boleh dimuatkan

Yang lebih biasa digunakan ialah 1 dan 3, yang mengawal masuk dan keluar masing-masing. Mengikut konfigurasi di atas, AngularCLI menjana kod berikut secara automatik, cuma gantikan return true; dengan kod sebenar kami. return false; bermakna melompat tidak dibenarkan atau anda boleh membatalkan dan meninggalkan halaman semasa.

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanDeactivate<unknown> {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

Dalam kaedah canActivate, kita juga boleh menggunakan lompatan. Sebagai contoh, halaman menentukan sama ada anda telah log masuk. Jika anda tidak log masuk, lompat ke halaman Log masuk:

this.router.navigate(['/login']);
return false;

2 Kawal sama ada penghalaan boleh diaktifkan

Untuk mengawal sama ada laluan boleh diaktifkan, ia perlu ditakrifkan di mana laluan ditakrifkan dan atribut canActivate ditambah. Jika perlu, anda juga boleh menambah atribut data, seperti memberitahu AuthGuard kami kebenaran yang perlu disahkan untuk memasuki laluan semasa. Atribut data adalah pilihan.

const routes: Routes = [
  {
    path: "page1",
    component: Page1Component,
    data: { permissions: ['YourPage1Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  },
  {
    path: "page2",
    component: Page2omponent,
    data: { permissions: ['YourPage2Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  }
]

3 Kawal sama ada laluan keluar (keluar)

Sama seperti mengawal sama ada laluan boleh diaktifkan, tambahkan dan rumuskan Pengawal yang sepadan. Tiada lagi contoh di sini canDeactivate

• Kawal masuk dan keluar URL melalui Pengawal Laluan; kami dalam mencipta fail pengawal;

• Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

  Pengenalan kepada Pengaturcaraan

  ! !

Atas ialah kandungan terperinci Analisis ringkas laluan pembelajaran sudut oleh Pengawal Laluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!