הרעיון שעומד מאחורי גארד (guard) הוא מאוד פשוט, מדובר בפונקציה שמופעלת ממש לפני שמבוצע ראוטינג ב-URL,
אם הפונקציה מחזירה TRUE אז זה תקין ואז הניווט מתבצע, אם חוזר FALSE אז הניווט נחסם.
נעשה את זה כך:
import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from "@angular/router";
import { Observable } from "rxjs";
import { AuthService } from "./auth.service";
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) { }
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
const isAuth = this.authService.getIsAuth();
if (!isAuth) {
this.router.navigate(['/login']);
}
return isAuth;
}
}AuthService – קובץ סרויס כלשהו שהכנו והוא מחזיק משתנה bool לאם המשתמש ביצע login או לא, זה יכול להיות כל דבר שתרצו.
בגלל שנחנו משתמשים בפונקצה שלנו כדי לקרוא לסרויס, והשימוש שלנו בפונקציה הוא כסרויס אז יש לנו מצב שסרויס קורא לסרויס ולכן אנחנו מוסיפים מעל לכולם את Injectable.
בפונקציה שלנו אנחנו עושים בדיקה לאם המשתמש יכול לגלוש לראוט המדובר (ראוט שאנחנו רוצים שרק משתמשים רשומים יקבלו גישה), במידה שכן אז שורה 17 מחזירה תשובה תקינה.
במידה שלא אז יכולנו להחזיר את אותה תשובה בדיוק, אבל במקום זה, אנחנו מבצעים ניתוב של היוזר לדף ההתחברות כדי שיבצע לוג-אין.
נעדכן את רכיב הראוטינג כך:
const routes: Routes = [
{ path: '', component: PostListComponent },
{ path: 'create', component: PostCreateComponent, canActivate: [AuthGuard] },
{ path: 'edit/:postId', component: PostCreateComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AuthGuard]
})
export class AppRoutingModule { }בשורה 12 אנחנו מושכים את הפונקציה למודול שלנו.
על כל מקום שאנחנו רוצים להגן נוסיף את התוספת הזאת canActivate: [AuthGuard] .
במקרה שלנו, אנחנו מגנים על יצירה של פוסט חדש ועריכה שלו מפני משתמשים שלא ביצעו רישום ומנסים להגיע לדף ישירות מה-URL.





