מניעת גישה מנתיבים באפליקציה של Angular באמצעות canActivate

במדריך הקודם למדנו לעבוד עם נתיבים (דפים) באפליקציה האנגולרית באמצעות routing, אבל כיצד נמנע מהמשתמשים באפליקציה כניסה לדפים מסוימים? לדוגמה, כיצד נתיר גישה לדפים מסוימים רק למשתמש מזוהה שעשה לוגאין. לצורך כך, נשתמש ב- CanActivate Guard. ה- guard הוא service.

צעד 1: נוסיף את קובץ ה-guard

ניצור קובץ auth.guard בתיקיית השורש של האפליקציה:

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

export class AuthGuard implements CanActivate {
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
   return true;
  }
}

• הקלאס מיישם את interface ששמו CanActivate שאותו אנו מייבאים מ-angular/router.
• כדי ליישם את ה-interface, הקלאס חייב לכלול מתודה canActivate שמקבלת שני פרמטרים:
  ActivatedRouteSnapshot
  RouterStateSnapshot
• מהיכן מגיעים הפרמטרים? Angular טוען את ה-guard לפני שנכנסים לנתיב, ומספק לו את הפרמטרים.
• המתודה צפויה להחזיר בוליאני. תחזיר true במקרה שהמשתמש רשאי להיכנס, ו-false שימנע כניסה של המשתמש.

צעד 2: נוסיף את ה-guard לרשימת ה-providers של האפליקציה

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { CarService } from './car.service';

import { HomeComponent } from './home/home.component';
import { CarsComponent } from './cars/cars.component';
import { CarComponent } from './cars/car/car.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { CarsEditComponent } from './cars/cars-edit/cars-edit.component';

import { AuthGuard } from './auth.guard';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent,
    CarsComponent,
    CarComponent,
    CarsEditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [CarService,AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

מכיוון שה-guard הוא service נייבא אותו לתוך ה-providers.

צעד 3: service שאחראי לזיהוי המשתמשים

ניצור service כדי לנהל את המשתמשים, ולהבחין בין משתמש שנכנס למערכת לבין מי שאינו מזוהה.

export class AuthService {
    loggedIn = false;

    isAuth(){
        return loggedIn;
    }
}

המתודה isAuth מחזירה את הערך של המשתנה loggedIn שאומר לנו האם המשתמש מזוהה במערכת.

צעד 4: נחבר את ה-services עם האפליקציה

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { CarService } from './car.service';

import { HomeComponent } from './home/home.component';
import { CarsComponent } from './cars/cars.component';
import { CarComponent } from './cars/car/car.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { CarsEditComponent } from './cars/cars-edit/cars-edit.component';

import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent,
    CarsComponent,
    CarComponent,
    CarsEditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [CarService,AuthService,AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

לא מספיק לייבא את ה-services, צריך להוסיף אותם לרשימת ה-providers.

צעד 5: נזריק ל-guard את הקלאס שממנו הוא יקבל מידע

איך ה-guard ידע להבחין בין משתמש מזוהה ולא מזוהה? הוא צריך לקבל מידע מ-AuthService. לכן נזריק את ה-AuthService ל-guard.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
       return true;
   }
}

הדקורטור Injectable מאפשר לקלאס לקבל מידע מקלאסים אחרים. באפליקציה שלנו, אנחנו מעוניינים לדעת האם המשתמש מזוהה, ולכן אנחנו צריכים לייבא את ה-AuthService אל תוך ה-guard.

אחרי שייבאנו את ה-AuthService אנחנו יכולים לבדוק באמצעותו האם המשתמש מזוהה. אם המשתמש מזוהה נחזיר true, ואם אינו מזוהה נפנה אותו לדף הבית.

import { CanActivate } from '@angular/router';

import { Injectable } from '@angular/core';
import { AuthService } from './auth-service';
import { Router } from '@angular/router';


@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private authService: AuthService, private router: Router){ }

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if(this.authService.isAuth()) {
            return true;
         } else {
            router.navigate("/");
            return false;
         }
}

}

אם המשתמש מזוהה באמצעות ה-AuthService הוא יוכל להיכנס לנתיב כי המתודה canActivate תחזיר true. ואם אינו מזוהה, הוא יופנה לדף הבית באמצעות router.navigate

צעד 6: נגדיר את הנתיבים שעליהם נשמור באמצעות canActivate

בקובץ ה-routing, נגדיר canActivate על הנתיבים שאנחנו מעוניינים להגן עליהם.

import { AuthGuard } from './auth.guard';

const appRoutes: Routes = [
	{path: '', component: HomeComponent },
	{path: 'cars', component: CarsComponent, 
canActivate: [AuthGuard],
children:[
		{path: ':id', component: CarComponent },
		{path: ':id/edit', component: CarsEditComponent }
	]},
	{path: 'not-found', component: PageNotFoundComponent},
	{path: '**', redirectTo: '/not-found'}
];

• canActivate בתוך הנתיב מקבל מערך של כל ה-guardים שבהם הוא צריך להשתמש.
• הוא מונע גישה ממשתמשים שאינם מורשים גם לנתיב שעליו הוא יושב וגם לכל הנתיבים הילדים.

כתוצאה מהשימוש ב-guard canActivate משתמש שאינו מזוהה במערכת שינסה להיכנס לדף יופנה לדף הבית. רק אחרי שעשה לוגאין, הוא יוכל להיכנס לדף.

למדריכים נוספים בסדרת ה-Angular

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים