Angular - blokowanie dostępu do ścieżki
Stronę tą wyświetlono już: 1348 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:
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:
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:
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:
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:
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.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz