Let's talk
  • [ Tech ]
  • [ Frontend ]
  • [ Vue.js ]

Strategia prostych komponentów uwierzytelniania w Vue.js

Kaliop

Opublikowano 8 września 2018

Wiele aplikacji korzysta z mechanizmów uwierzytelniania, które wdrażamy na różne sposoby. System komponentów Vue.js oferuje ogromne możliwości, więc wykorzystajmy go do prostego obsłużenia procesu uwierzytelnienia.

Nie zawsze konieczne jest posiadanie skomplikowanego systemu uwierzytelniania – wiele aplikacji ma proste potrzeby!

Uwaga: przykłady kodu przedstawione w tym artykule wykorzystują vue-cli i vue-router. KOd jest dostępny tu : https://github.com/Erilan/auth-components-strategy-vuejs

Możemy ograniczać dostęp do stron za pomocą navigation guards w vue-router, jednak czasami potrzeby są naprawdę proste i do obsługi dostępu do stron wystarczą nam same komponenty.

Strona z ograniczonym dostępem

Załóżmy, że mamy stronę, którą chcemy zabezpieczyć – na przykład panel administracyjny, profil użytkownika lub inne prywatne sekcje.

Ta strona jest bardzo prosta, ale może wykonywać zapytania do API w celu wyświetlenia prywatnych informacji. 

Teraz skonfigurujmy vue-router, aby udostępnić tę stronę.

Jeśli przejdziesz na tę stronę http://localhost:8080/#/private-page, zobaczysz prywatną treść.

private page

 

Strona logowania

Mamy już sekcję z ograniczonym dostępem, więc czas przygotować formularz logowania. W naszym przykładzie posłużymy się bardzo prostym widokiem uwierzytelniania.

Metoda logowania jest naprawdę prosta: po prostu wysyła zdarzenie do komponentu nadrzędnego, ale w rzeczywistych przypadkach musimy wykonać wywołanie API, sprawdzić ciasteczko albo stan w Vuex… cokolwiek, co zadziała.

Strategia komponentów uwierzytelniania

A oto na czym polega ta strategia:

Zamiast stosować navigation guards, przekierowania czy osobne komponenty dla każdego stanu użytkownika, po prostu sprawdzamy, czy jest on zalogowany.

Jeśli użytkownik jest zalogowany, wyświetlamy stronę odpowiadającą danej ścieżce, w przeciwnym razie pokazujemy komponent logowania.

W naszym przykładzie, gdy użytkownik się zaloguje, komponent App.vue otrzymuje informację o zmianie stanu i wyświetla router-view, zamiast formularza logowania.

System w tym przykładzie jest celowo uproszczony, ale zamiast polegać na lokalnej zmiennej isLoggedIn możemy w tym miejscu sprawdzać pliki cookie, zaglądać do magazynu vuex czy wykonywać zapytanie do API.

Treść wiadomości Gemini
Możemy również to udoskonalić, aby obsługiwać ścieżki, które nie mają ograniczeń dostępu, korzystając z... nested routes.

Możemy również wykorzystać przejścia (Vue transitions), aby zapewnić płynniejszą zmianę między formularzem logowania a stroną z ograniczonym dostępem.

Rozwiązanie to nie jest idealne, ponieważ nie obsłuży wszystkich możliwych przypadków, ale przy prostych wymaganiach sprawdza się doskonale!

Kod znajdziecie tu : https://github.com/Erilan/auth-components-strategy-vuejs

 

Podobne treści