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

מחבר:
בתאריך:

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

 

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

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

/src/app/car.service.ts
------------------------------
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 של האפליקציה

app.module.ts
-------------------
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 כדי לנהל את המשתמשים, ולהבחין בין משתמש שנכנס למערכת לבין מי שאינו מזוהה.

/src/app/auth.service.ts
-------------------------------
export class AuthService {
    loggedIn = false;

    isAuth(){
        return loggedIn;
    }
}

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

 

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

/src/app/app.module.ts
------------------
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.

/src/app/auth.guard.ts
-----------------------------
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, ואם אינו מזוהה נפנה אותו לדף הבית.

/src/app/auth.guard.ts
-----------------------------
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 על הנתיבים שאנחנו מעוניינים להגן עליהם.

app-routing.module.ts
---------------------
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

הוסף תגובה חדשה

 

= 9 + 4