Dziś poruszymy temat logowania. Mamy naszą aplikację, ale chcemy mieć również panel admina. Co potrzebujemy krok po kroku? Formularz od wpisania nazwy użytkownika i hasła, możliwości wysłania wpisanych danych w celu sprawdzenia poprawności oraz funkcjonalności odpowiadającej za ustawienie prawa dostępu do funkcjonalności przeznaczonych dla admina.
Zaczynając przygotowujemy formularz.
login.component.html

 

Teraz obsługa naszego formularza. Zaczniemy od serca związanego z uprawnieniami. Tworzymy serwis, w którym
mamy:
  • zmienną cookieName odpowiadającą nazwie ciasteczka zawierającego token
  • funkcję getTokenName() zwracającą prywatną zmienną  cookieName 
  • funkcję  getToken() zwracającą wartość tokena
  • funkcję  isAdmin() zwracającą true lub false w zalezności od tego czy token istnieje
  • funkcję  loginSuccess() ustawiającą cookie z tokenem zwracanym z backendu
auth.service

 

Wraz z ostatnią funkcją loginSuccess() dobrnęlismy do sedna sprawy. Wlaśnie ona jest nam potrzebna do obsługi formularza. W login.component.ts po wysłaniu zapytania post do backendu wykorzystujemy  loginSuccess() w celu ustawienia tokena oraz po zalogowaniu przekierowujemy użytkownika na stronę home.
login.component.ts

 

Oczywiście warto dodać jeszcze sprawdzenie czy backend zwrócił token, a jeśli nie, bo zostały wpisane blędne dane, to wyświetlić stosowny komunikat. W każdym razie stworzyliśmy już bazę do dalszych funkcjonalności związanych z logowaniem.

Author: