Vue.js: Tworzenie guardów
Techniki Zaawansowane
5 godz. 11 min · Vue.js · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Zaawansowane techniki pracy z Vue.js
- Praca z wieloplikowymi komponentami
- Zarzadzanie stanem aplikacji z VueX
- Routing z uzyciem vue-router
- Praca z danymi z uzyciem axios
- Techniki walidacji formularzy
- Praktyczne projekty
- Masa przydatnych wskazówek
Kurs, który masz przed sobą, to kontynuacja wydanego wcześniej kursu Vue.js od Podstaw. W pierwszym kursie omówione zostały najważniejsze koncepcje pracy z Vue, a w tym materiale poruszamy już bardziej zaawansowane tematy. Przede wszystkim skupimy się na pracy z użyciem nowoczesnego workflow, co da nam niezwykłą swobodę tworzenia aplikacji internetowych. Jeśli zatem znasz już podstawy pracy z tym frameworkiem i chcesz wskoczyć na kolejny poziom wtajemniczenia, ten kurs jest zdecydowanie dla Ciebie. A co znajdziesz w materiale?
Zaawansowane koncepcje
Na początku zobaczysz, jak szybko tworzyć pliki startowe do nowej aplikacji z użyciem narzędzia vue-cli. Omówimy możliwość dzielenia kodu na wiele plików, tworzenia szablonów, a także wykorzystywania bezpośrednio funkcji renderującej, do której zamieniane są na etapie builda wszystkie szablony.Zobaczysz również czym są i jak pracować z komponentami funkcyjnymi i tzw. mixinami, które pozwolą reużywać raz napisany fragment kodu.
Zarządzanie stanem aplikacji z VueX
Przepływ informacji to bardzo ważny temat w każdej aplikacji internetowej. Vue oferuje kilka sposobów na to, aby komponenty mogły się ze sobą komunikować. Ich omówienie zaczniemy od najprostszych technik, które świetnie sprawdzają się w wielu przypadkach. Następnie rozszerzymy możliwości instancji Vue w ten sposób, aby wszystkie komponenty miały dostęp do scentralizowanego miejsca, gdzie przechowywany będzie stan aplikacji.Tam jednak, gdzie aplikacja wymaga zarządzania większą ilością danych jednocześnie, powyższe techniki mogą być niewystarczające. Z tego powodu, podobnie jak w innych frameworkach, Vue posiada oficjalny wzorzec oraz bibliotekę do zarządzania stanem aplikacji. Rozwiązanie to nazywa się VueX i w kursie zostanie ono dokładnie omówione. Zobaczysz zatem jak skonfigurować tzw. store, jak przechowywać w nim dane, jak je wyświetlać w widokach, aktualizować za pomocą tzw. mutacji czy pracować z nimi wykorzystując akcje. Przekonasz się, że początkowa większa ilość pracy, aby wszystko skonfigurować, w pewnym momencie zaczyna się opłacać.
Routing w aplikacji
Tworzenie nowoczesnych aplikacji typu SPA (Single Page Application) nie może się obejść bez zmian widoków. Dobrą praktyką jest, aby wraz z takimi zmianami, aktualizowany był również pasek adresu. Wykonanie takiego zadania umożliwiają nam tzw. routery. Vue posiada oficjalny dodatek o nazwie vue-router, który w tym kursie dokładnie omówimy.Zobaczysz jak dołączyć router do swojego projektu, a także jak konfigurować ścieżki. Poruszymy tematy takie jak generowanie odnośników, dynamiczne parametry, tworzenie zagnieżdżonych ścieżek czy nawigacja z poziomu kodu JavaScript. Dowiesz się również, jak tworzyć tzw. guardy, które umożliwią lub zablokują możliwość wyświetlania wybranego widoku, np. w zależności od tego czy użytkownik jest aktualnie zalogowany.
Praca z danymi z serwera
Trzecim, po zarządzaniu stanem aplikacji i wykorzystaniu routingu, komponentem, który niezbędny jest do tworzenia aplikacji napędzanych danymi, jest możliwość wysyłania zapytań HTTP.Tę czynność umożliwi nam bardzo popularna, acz niezależna od Vue biblioteka axios. Zobaczysz jak za jej pomocą pobierać i wysyłać dane. Aby jednak jak najwygodniej pracować z tym rozwiązaniem, połączymy axios z Vue, udostępniając tak naprawdę jej metody wewnątrz każdego komponentu.
Walidacja formularzy
W jednym z rozdziałów kursu podejmiemy temat walidacji formularzy. Zobaczysz jak z pomocą popularnego pluginu dla Vue, robić to w bardzo prosty sposób.Omówimy różne funkcje walidujące, które umożliwią sprawdzenie poprawności pól tekstowych, radio czy checkboxów. Zobaczysz jak w łatwy sposób wyświetlać komunikaty o błędach i warunkowo zmieniać wygląd pól. Nie zabraknie również informacji o asynchronicznej walidacji, która pozwoli nam na żywo sprawdzać czy wpisany adres email jest dostępny czy też nie.
Praktyczne projekty
Kurs ten oczywiście to nie tylko niezbędna teoria, ale także praktyczne przykłady. Aby jak najlepiej poznać omawiane techniki, wykorzystamy je do stworzenia ciekawych aplikacji.Pierwszą z nich będzie konfigurator produktu, który umożliwi użytkownikowi wybór podzespołów zamawianego komputera. Każdy taki wybór będzie wpływał na końcową cenę, która będzie na bieżąco aktualizowana. Po wybraniu wszystkich opcji, dane prześlemy na serwer. To projekt który pokaże Ci jak przechowywać dane z użyciem VueX, a także jak na ich podstawie wyświetlić widok i napisać logikę.Innym projektem, który wykonamy, będzie Quiz. To aplikacja, gdzie użytkownik odpowiadał będzie na serię pytań pobranych z serwera, a do wyboru będą 3 odpowiedzi. Po przejściu przez wszystkie pytania, wyślemy do serwera zapytanie, a ten w zamian zwróci nam listę poprawnych odpowiedzi. Dzięki temu pokażemy użytkownikowi, gdzie miał rację, a gdzie popełnił błąd. Aplikacja ta wykorzystywać będzie wszystkie najważniejsze techniki, tj. VueX, routing, a także Ajax.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które czują się już swobodnie w pracy z frameworkiem Vue. Jeśli zatem masz już solidną wiedzę podstawową lub przerobiłeś kurs Vue.js od Podstaw, to zdecydowanie jesteś gotów na poszerzenie swoich umiejętnośći w pracy z tym frameworkiem. Co ważne, doświadczenie w pracy z innymi frameworkami JavaScript nie jest tutaj wymagane, a jedyne co będzie bardzo pomocne, to znajomość nowej składni EcmaScript 6.
Vue.js 2.x.x
W tej lekcji pokażę ci w jaki sposób tworzyć tzw. guardy dla naszej nawigacji, abyśmy np. nie mogli przejść
pod jakiś widok,
jeżeli nie jesteśmy zalogowani.
Oczywiście to wszystko jest po stronie klienta, więc teoretycznie da się to oszukać. Zawsze pamiętaj, że
zabezpieczenia muszą być również po stronie serwera. Natomiast my się tutaj zajmujemy framework'iem client side,
jakim jest Vue, więc pokażę ci jak można to zrobić z punktu widzenia wrażeń użytkownika.
Na początek jednak jesteśmy na stronie dokumentacji VueRouter pod Navigation Guards, bo chciałbym ci krótko powiedzieć,
co w ogóle jest możliwe, dlatego że my nie będziemy ze wszystkich rzeczy korzystać.
Po pierwsze jeżeli chciałbyś sobie wykonać jakąś akcję przed każdą nawigacją, przed każdym przejściem, to możesz
do routera, gdzie go tworzyliśmy, przypisać coś takiego jak beforeEach i podać funkcję i ta funkcja otrzyma
to i to, to będzie po prostu route, to będzie obiekt takiej ścieżki, do której ta nawigacja ma zamiar przejść,
z której oraz funkcja next.
I tutaj możesz wykonać różne czynności i wykonać tą funkcje next i ją można wykonać z różnymi wartościami.
Jeżeli tylko ją wykonamy, to mówimy jak najbardziej przejdź do tej ścieżki, pod którą użytkownik nawigował.
Jeżeli podamy false, to znaczy, że chcemy przerwać i nie pozwolić przejść pod taką ścieżkę.
Możemy również podać gdzie chcemy przekierować, w taki sposób lub tutaj podając taki obiekt.
W zasadzie wszystkie obiekty, które do router-push mogliśmy podawać czy do tego router-link, również możesz
tutaj wpisać czyli np. name i users itd.
Możesz również przekazać error, czyli zrobić po prostu tutaj new error i wtedy zostanie on przekazany.
Jeżeli byśmy do routera przypisali router on error. Natomiast ja będę chciał się skupić na czymś innym,
bo to przypisujemy globalnie i mamy również taki hook jak router afterEach i po każdej ścieżce pamiętaj,
że coś takiego jest możliwe. Natomiast ja będę chciał przypisać wewnątrz komponentu beforeRouteEnter,
czyli tutaj wewnątrz takiego komponentu będę chciał to zrobić i możemy to zrobić tutaj gdzie definiujemy
komponent i teraz ci pokaże w jaki sposób, więc będę chciał zrobić tak, żeby w naszej aplikacji,
jeżeli będziemy chcieli przejść do edycji, to żeby sprawdzić czy użytkownik jest zablokowany i tylko
wtedy pozwolić przejść pod taką właśnie ścieżkę. OK, więc możemy to zrobić w ten sposób, że przejdziemy
tutaj gdzie mieliśmy UserEdit i tutaj zrobimy sobie właśnie coś takiego jak beforeRouteEnter. Może zrobimy
to w tym miejscu.
Bardzo ważne jest to, że jest to funkcja i ona otrzyma to, czyli gdzie chcemy przejść from oraz next do
wykonania.
Ważne jest, że tutaj wewnątrz this nie jest dostępne, dlatego że to jest przed przejściem w ogóle, pod
taką ścieżkę, czyli instancja naszego komponentu nie została jeszcze utworzona, więc nie mamy dostępu
do this i do tych wszystkich rzeczy, które się tutaj znajdują.
Natomiast w ten sposób możemy powiedzieć, że w momencie kiedy ktoś będzie chciał przejść pod ścieżkę
pod którą ma być ten komponent, to chcemy tutaj dokonać pewnego sprawdzenia.
Ja chciałbym sprawdzić czy użytkownik jest zalogowany i przygotowałem taki prymitywny sposób.
Oczywiście on nie jest tak w stu procentach bezsensowny, bo w podobny sposób pracuje się z np.
JSON Web Token.
Natomiast tutaj zrobimy to w bardzo prosty sposób, dla celów demonstracyjnych.
Otóż będę chciał sprawdzić czy w window.localStorage, mamy coś takiego jak token, czyli zrobimy sobie
getItem token.
Mam nadzieję, że pracowałeś wcześniej z localStorage.
Wiesz o co chodzi, możemy zapisywać po stronie klienta po prostu jakieś dane.
Jeżeli ten token się tam znajduje, to chcę pozwolić przejść pod tę ścieżkę, czyli zrobimy sobie po prostu
next.
W przeciwnym wypadku moglibyśmy zrobić next false i wtedy nie przejdziemy pod taką ścieżkę, ale tak naprawdę
użytkownik nie będzie wiedział co się stało.
Więc ja chciałbym tutaj po prostu przekierować, next, name, login. Chce przekierować do ścieżki, która ma
nazwę login.
Ja taką ścieżkę przygotowałem tutaj w routes, pod ukośnik login.
Zobacz tutaj jest name login i wygląda to w następujący sposób, jeśli byśmy tutaj przeszli pod login. Zauważ,
że korzystam z History API, które zdefiniowaliśmy wcześniej. Tak wygląda logowanie, jeżeli coś wpisze.
Zobaczmy jak ten komponent wygląda.
Jeżeli coś wpisze i kliknę przycisk tutaj zaloguj, to po prostu zasymuluje wysłanie zapytania AJAX do
serwera. Zróbmy Timeout i po półtorej sekundy ustawiamy w localStorage token na randomowy, taki token.
I to będzie oznaczało, że jesteśmy jakby zalogowani i dodatkowo będę chciał przejść do strony głównej,
czyli router push name Home.
W ten sposób to będziemy mogli zrobić, na spokojnie sobie, w razie czego zerknij. Natomiast tutaj widzimy
już jak to będzie działać.
Ok.
Czyli tak naprawdę ani tu ani from nie było mi potrzebne, ale to może się przydać bo możemy się odwołać
do pewnych konfiguracji, które tutaj się znajdują w takiej ścieżce, ale o tym jeszcze za moment, więc spróbujmy
tutaj wrócić do strony głównej, do użytkowników i do Edycji, ok i przy edycji skierowało nas do login.
Zauważ z tego powodu, że właśnie tutaj gdybyśmy weszli w application local storage, nie ma czegoś takiego
jak token.
Więc jeżeli teraz bym sobie tutaj wpisał dowolne hasło, oczywiście normalnie byśmy je sprawdzali na serwerze.
Po półtorej sekundy ustawimy ten token.
Zobacz, on już tutaj jest.
Do strony głównej.
I teraz jeżeli raz jeszcze byśmy spróbowali przejść do szczegółów edycji, to już nam się to uda, dlatego
że ten guard pozwolił nam tam przejść i wykonał tak naprawdę tę akcję, która znajduje się w tym miejscu.
Oczywiście normalnie jeszcze byśmy musieli walidować czy ten token jest poprawny po stronie serwera, ale
to już przy wysyłaniu zapytania.
Czyli gdybym coś tutaj edytował i chciał to wysłać na serwer, serwer musiałby to również sprawdzić ten
token należałoby tam przekazać.
Ale to nie jest w tym momencie istotne.
Ok.
Jest jeszcze inna możliwość jak to zrobić. Jeżeli będziesz miał więcej komponentów, które chcesz chronić
za pomocą takiego guard'a ja go tutaj wykomentuje, żeby ci go po prostu zostawić.
Natomiast również sobie to skopiuje.
Będziemy mogli przejść do miejsca gdzie tworzyliśmy router i tutaj będziemy musieli go nazwać, czyli
zrobimy sobie const router i na samym dole go po prostu wyeksportuje,
export default router.
Natomiast zanim to zrobię, to będę mógł jeszcze tutaj go skonfigurować, więc będę chciał napisać router
i tak jak na stronie dokumentacji widziałeś, mamy coś takiego jak beforeEach.
Możemy przejść w to miejsce, beforeEach, bardzo podobnie to będzie wyglądać do tego, co sobie skopiowałem,
czyli beforeEach. Z tym, że teraz, jeżeli nie będziemy mieli tego token'a zobacz, co się stanie.
Ja go usunę, po prostu, w ten sposób. To pod dowolną ścieżkę będę chciał przejść to będzie mnie przekierowywało tak naprawdę
do login.
Przynajmniej tak być powinno, widzę że tutaj tak się nie stało.
Ok, bo tutaj popełniłem błąd.
To powinno być wywołanie tej funkcji router.beforeEach
i tutaj będziemy dopiero przekazywać funkcje.
Troszeczkę źle to zrobiłem, dokładnie tak. To co jest wewnątrz, czyli to wszystko.
To będzie funkcja, którą chcemy tutaj dopiero przekazać.
OK, zróbmy to w taki sposób i tutaj jeszcze zrobimy to w formie funkcji strzałkowej, czyli będzie to wyglądać
następująco.
Czyli tak naprawdę do beforeEach chcemy przekazać funkcję. Ok i teraz powinno być w porządku.
Z tym, że mamy taki problem, że tak naprawdę nic nam się nie wyświetla, bo w kółko nas można powiedzieć przekierowuje.
Dlatego teraz chcę zrobić inną rzecz. Mianowicie będę chciał przejść do naszego routes i dodać do tych
ścieżek, które chcę żeby były chronione.
Coś takiego jak meta. Możemy przejść tutaj gdzie mieliśmy np. UserEdit. Jest dokładnie w tym miejscu
i dodamy sobie coś takiego jak meta.
Jest to po prostu obiekt z takimi meta danymi, który możemy sobie tutaj dopisać i napiszę auth: true.
I co nam to daje?
Otóż teraz w tym miejscu, pod to, czyli ścieżka, do której nawigujemy np. do UserEdit. Będę mógł się do tego meta
odwołać, czyli będę chciał zrobić coś takiego,
if to meta auth.
Jeżeli tam jest ustawione, ma wartość true, to tylko wtedy chcę zrobić to sprawdzenie, to jest tutaj albo w zasadzie
możemy to jeszcze uprościć. Jeżeli not to, po prostu return next, czyli pozwalamy przejść pod taką ścieżkę.
W przeciwnym wypadku dopiero będziemy to sprawdzać.
Ok.
Odświeżmy. Jest wszystko w porządku. Przechodzimy do użytkowników, jest w porządku. Natomiast jeżeli przejdę
do edycji, to tylko wtedy na tej ścieżce okaże się, że mamy to meta auth i to sprawdzenie będzie miało
miejsce. Jeżeli się zaloguje,
zobaczmy token się tutaj pojawił i spróbuje jeszcze raz przejść do edycji któregoś użytkownika. Okaże się, że
teraz jest to możliwe.
Jak zatem widzisz, mamy dwie możliwości albo możemy wprost w takim widoku wpisać sobie beforeRouteEnter
albo możemy go skonfigurować globalnie dla wszystkich ścieżek lub dla wybranych ścieżek, bo możemy je
wybierać, za pomocą np. czegoś takiego jak meta. Przy okazji to meta, jak widzisz, możesz sobie również
przekazywać, jeżeli mogłoby się to do czegoś innego przydać.
Więc ja polecam Ci, żebyś sobie jeszcze tutaj na spokojnie zerknął na wszystkie rzeczy, które się tutaj
znajdują.
I my z tymi kartami jeszcze w tym kursie będziemy później pracować.