CanActivate route guards
המשמעות של CanActivate היא הרשות לגלוש לעמוד. CanActivate מדבר על הרשאות.
נניח שיש לנו עמוד שאנחנו רוצים שרק ה-admin יגיע אליו, לפני שמאשרים את המעבר לעמוד אנחנו צריכים לאשר שהמשתמש הוא בעל הרשאה מתאימה להכנס לשם.
יצירת ה-guard:
ng g guard guards/auth
שלבים בעבודה עם guard:
- יצירת guard service.
- implements the guard interface.
- implement the method of the interface.
- החזרה true to navigate, false to block navigation.
- Add the service to the providers of the module.
- עכשיו אפשר להוסיף את ה-guard לנתיב המתאים.
CanActivate
הפונקציה מחליטה אם נתיב יכול להיות מופעל על סמך תנאי מסויים.
קודם נכתוב את canActivate.
export class CourseGuard implements CanActivate
הפונקציה canActivate מקבלת שני פרמטרים: ActivatedRouteSnapshot, RouterStateSnapshot ומחזירה ערך בוליאני.
כדי להפעיל את ה-guard אנחנו מוסיפים אותו לנתיב שבו רוצים אותו. כאן למשל תהיה הגבלה על מי שיכול להכנס לעמוד הקורסים.
{ path: 'courses', component: CoursesComponent, canActivate: [CourseGuard] },
אם יש לנו למשל שירות שאומר לנו מתי הגולש הוא login אפשר להשתמש בו ב-guard.
export class AuthService {
loggenIn: boolean = false;
login(){
this.loggenIn = true;
}
logout(){
this.loggenIn = false;
}
isAuthenticated(){
this.loggenIn;
}
}
constructor(private authService: AuthService){}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if(this.authService.isAuthenticated()){
return true
} else {
this.router.navigate(['']);
return false;
}
}
CanActivateChild Route guard
אנחנו רוצים להגן גם על כל המסלולי child של מסלול מסויים בלי לפרט לכל אחד את ה-guard. נצטרך לממש את הפונקציה canActivateChild.
export class CourseGuard implements CanActivate, CanActivateChild{
canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
return this.canActivate(childRoute, state);
}
}
ולהוסיף את ה-guard למקום הנכון.
{ path: 'courses', canActivateChild: [CourseGuard], children: [
{ path: 'course/:id', component: CourseComponent }
]},