Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1478 razy

Wstęp

Różni użytkownicy stworzonej w Angularze aplikacji mogą a nawet i muszą mieć różne uprawnienia. W tym celu użytkownik po zweryfikowaniu danych logowania powinien otrzymać od strony serwera informację zwrotną w postaci JWT tokena. Z kolei tą informację trzeba przechować w local storage-u, który umożliwia przechowywanie danych nawet gdy użytkownik zamknie przeglądarkę. Każdy JWT token ma swoją datę ważności oraz inne informacje, które mogą zostać zdekodowane. To powoduje, że każdy może nadpisać JWT tokena, jednakże w taki sposób nadpisany JWT token nie będzie już ważny albowiem przy weryfikacji jego po stronie serwera wyjdzie na jaw, że został on nadpisany a tym samym dostęp do ścieżki będzie zablokowany.

Na tej podstronie opiszę ogólny zarys używania mechanizmu blokowania dostępu do ścieżek z pominięciem samego JWT tokena bo wymagało by to obsługi od strony serwera jak i użytkownika.

Przygotowanie ścieżek i komponentów pod nie podpiętych

Potrzebne będą cztery komponenty, które zostaną podpięte do ścieżek routingu:

const routes: Routes = [ { path: 'userTypeChoose', component: ChooseUserTypeComponent, children: [ { path: 'userView', component: UserViewComponent, data: { canActivate: 'user' }, canActivate: [AuthGuard] }, { path: 'superUserView', component: SuperUserViewComponent, data: { canActivate: 'superUser' }, canActivate: [AuthGuard] }, { path: 'superExtraUserView', component: SuperExtraUserViewComponent, data: { canActivate: 'superExtraUser' }, canActivate: [AuthGuard] } ] } ];

Pod każdą ścieżkę został podpięty serwis, którego jedynym zadaniem będzie sprawdzanie, czy użytkownik może wleźć na daną ścieżkę, czy też nie. Oto jak deklaracja klasy tego serwisu wygląda:

import { Injectable } from '@angular/core'; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) { } canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (next.data.canActivate === this.authService.userType) { return true; } return false; } }

Jak widać nic ciekawego tutaj nie ma, serwis ten po prostu implementuje interfejs CanActivate , który to z kolei wymusza obsługę metody canActivate. Metoda ta przyjmuje dwa argumenty, z czego pierwszy wykorzystuję by w jakże przebiegły sposób dobrać się do danych podpiętych w routingu do danej ścieżki. Tak się jakoś szczęśliwie składa, że dane te zawierają informacje o typie użytkownika, jaki został w danej chwili wybrany. Istotną rolę odgrywa tutaj również zmienna authService, która to przechowuje informacje o typie wybranego użytkownika. Kod tegoż serwisu wygląda następująco:

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AuthService { constructor() { } userType = ''; }

I znów, nic ciekawego, po prostu przechowuję tutaj nazwę typu użytkownika. Wracając jednak jeszcze na chwilę do serwisu AuthGuard i jego metody canActivate to trzeba dopowiedzieć, że gdy metoda ta zwraca false dostęp do ścieżki zostaje zablokowany. Zaś gdy zwraca true dostęp do ścieżki jest przyznany.

Czas najwyższy pogrzebać w kodzie komponentu ChooseUserTypeComponent co też i z najdzikszą rozkoszą czynię zaczynając od kodu HTML:

<div> <mat-radio-group [(ngModel)]="userType" (change)="changeUserType()"> <mat-radio-button value="user">użytkownik</mat-radio-button> <mat-radio-button value="superUser">super użytkownik</mat-radio-button> <mat-radio-button value="superExtraUser">super extra użytkownik</mat-radio-button> </mat-radio-group> </div> <div> <button mat-raised-button routerLink="/heroes/userView">Widok użytkownika</button> <button mat-raised-button routerLink="/heroes/superUserView">Widok super użytkownika</button> <button mat-raised-button [routerLink]="'/heroes/superExtraUserView'">Widok super ekstra użytkownika</button> </div>

Jak widać wykorzystuję tutaj kilka kontrolek mat-radio-button w celu umożliwienia wyboru użytkownika oraz przyciski, które umożliwią przełączenie się na ścieżkę dostępną dla danego typu użytkownika. Kod klasy komponentu będzie wyglądał mniej więcej tak:

@Component({ selector: 'app-choose-user-type', templateUrl: './choose-user-type.component.html', styleUrls: ['./choose-user-type.component.css'] }) export class ChooseUserTypeComponent { userType = ''; constructor( private authService: AuthService ) { } changeUserType() { this.authService.userType = this.userType; } }

Ot i cała filozofia. Teraz po wybraniu jednej z trzech opcji będzie możliwe przejście tylko na ścieżkę, która odpowiada danemu typowi użytkownika.