Rumah > Artikel > hujung hadapan web > 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.
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
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!