React: Logowanie użytkownika

16.8.x

0:00Cześć, w poprzedniej lekcji stworzyliśmy sobie akcję, która autoryzuje

0:04naszego użytkownika i pewnie

0:09zauważasz tutaj dziwną różnice. Pojawiły się takie const'y, które

0:13mają string'i o takiej samej zawartości jak one same się nazywają. Wynika

0:22to z faktu, że zawsze kiedy posługujemy się jakimi wartościami, które są

0:26string'iem to bardzo łatwo o literówkę, jakąś pomyłkę i nigdzie

0:31JavaScript nam nie powie, że coś zrobiliśmy źle, jeśli to faktycznie jest

0:35w string'u więc zawsze tego typu wartości warto wrzucać

0:39do const'ów, które po prostu używamy zamiast tych samych string'ów,

0:43ponieważ wtedy jeśli pomylimy się w nazwie const'a to od razu

0:47dostaniemy błąd, że nie ma takiego consta, że to jest undefined po prostu,

0:51więc jest to dużo bezpieczniejsze i stosuje się to zarówno w akcjach,

0:55ale importuje się to także do reducer'a. Dlatego

1:01tutaj pojawiły się te importy. Teraz możemy

1:05tutaj na przykład podmienić właśnie add item i remove

1:10item, a dodatkowo skoro już jesteśmy w reducerze

1:14to możemy jeszcze zrobić kolejny case, czyli authentication success. W

1:21momencie kiedy nasz użytkownik zostanie

1:25zalogowany, chcemy zwrócić

1:29nasz state, a przy okazji zapisać

1:35jego dane. Jeśli zerkniemy sobie na nasz

1:39response tutaj, to zauważymy, że mamy username i id, więc

1:44stwórzmy sobie teraz tutaj user i wprowadzając poprzedni state

1:49nadpiszemy tym samym user id, my nie musimy się tutaj martwić

1:53o poprzedniej stan user id, ponieważ po zalogowaniu on zawsze będzie

1:58jakiś inny, zależnie od tego jaki user się zaloguje do naszej aplikacji i

2:02teraz na podstawie obecności user id jesteśmy w stanie

2:06określić czy nasza aplikacja autoryzowała tego użytkownika. Jeśli

2:10tak to powinien zostać przekierowany do aplikacji i teraz tutaj słowo

2:14wyjaśnienia. Nie będziemy tutaj stosować takiej bardzo skomplikowanej

2:19autoryzacji w tej aplikacji razem z chronionymi z route'ami,

2:23które nie pozwalają wejść w jakąś część aplikacji, jeśli użytkownik

2:28nie jest zalogowany. Generalnie jest to temat na kolejny

2:32kurs, bardziej zaawansowany, ponieważ tutaj staram się wyjaśniać nieco

2:36bardziej zaawansowany, acz nadal nieco proste koncepty. Nie

2:40wchodzimy jeszcze tak głęboko tutaj bezpieczeństwo aplikacji i tego

2:44typu rzeczy. Bardziej po prostu pokazuje co możemy zrobić w React'ie

2:48w nieco bardziej zaawansowany sposób, więc teraz jeśli wrócimy sobie do

2:52naszego login page, to możemy zrobić coś takiego, że

2:56stworzymy sobie funkcję mapStateToProps,

3:02z naszego state'u

3:06wyciągniemy sobie user id, które

3:11jeśli go nie będzie to będzie nullem i teraz

3:19to map state to props możemy podać jako pierwszy parametr w naszym connect'ie. Dodatkowo

3:25możemy go sobie zdestrukturyzować tutaj. Ten user id, który tam

3:29podajemy i sprawdźmy tylko czy ten user id faktycznie

3:33się pojawia, więc tutaj zrobimy sobie heading i teraz

3:41jeśli podam my user password raz dwa trzy to

3:46po zalogowaniu ten user id powinien się pojawić

3:50nad naszym nagłówkiem i faktycznie się pojawił, więc

3:55skoro mamy to zrobione to możemy teraz na podstawie tego, tej

4:00obecności tego user id sprawić, że wyrenderuje

4:04nam się redirect, za importujemy sobie więc tutaj tego redirect'a

4:08i w naszym komponencie zwrócimy

4:13taki warunek, że jeśli jest

4:18user id jest obecne wtedy niech

4:23zwróci nam komponent redirect, prowadzący

4:30do naszej strony głównej. Teraz, jeśli to dobrze

4:34działa to po zalogowaniu zostaniemy

4:38przeniesieni i tak się właśnie stało, więc

4:43skoro taką powiedzmy atrapę logowanie mamy już za sobą, to teraz

4:47w następnej lekcji zajmiemy się komponentami naszych

4:51notatek i integracją ich z API.