#Angular2 – Pierwsze starcie

Pora wziać się za Angulara2. Widziałem, że jeden z uczestników (nie pamiętam kto) miał dylemat, czy warto uczyć się Angulara2, czy napisać wszystko w AngularJS. Doszedł on do wniosku, że AngularJS ma większe wsparcie, bo jest dłużej na rynku i sporo aplikacji jest w nim napisana, więc nie tak prędko wyjdzie on z użytku. Ciekaw jestem, jak to będzie z 2, ponieważ na horyzoncie pojawia się już 4, a Angular2 nadal nie dorównuje wsparciem społeczności pierwszej wersji. Może się okazać, że 4 szybko wypchnie 2.

Dzisiaj zacząłem pracę nad połączenim Angulara i JWT. Znalazłem fajny poradnik, jak zrobić to, bez wykorzystania dodatkowych zależności. Nie jest to nic skomplikowanego, ponieważ nie musimy odszyfrowywać tokena, ani wykonywać skomplikowanych operacji. Muszę tylko sprawdzić dane użytkownika, pobrać token i zapisać go w aplikacji, potem ew. usunąć przy wylogowaniu.

Najpierw stworzyłem sobie routing i dodałem wygląd interfejsu. Potem skopiowałem kod z tutorialu i chciałem sprawdzić, czy będzie to wszystko działać. Zmieniłem nazwy kilku zmiennych, dodałem odpowiednie pliki, formularz logowania i wykonałem pierwszy test. Oczywiście nie udało się pobrać tokena. Uruchamiam konsolę i widzę błąd:

XMLHttpRequest cannot load http://localhost:8000/api/login_check. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value 'null'. Origin 'http://localhost:4200' is therefore not allowed access.

Szybkie wyszukanie frazy w google, stackoverflow i już wszystko wiem. W przeglądarkach jest pewne zabezpieczenie, które nie pozwala wysyłać danych Ajaxem do innej domeny. Przy publikowaniu projektu, wszystko będzie na w jednej domenie, więc już nie będzie problemu, ale teraz muszę jakoś to ominąć. Można bawić się w konfiguracji przeglądarki, ale wystarczy prosta wtyczka Allow-Controll-Allow-Origin. 3 kliknięcia i problem z głowy.

Wysyłam formularz ponownie i znów błąd, tym razem udało się już połączyć z API, ale otrzymuję komunikat „Bad credentials”. Ok, czyli coś musi być nie tak z  wysyłaniem formularza. W konsoli nie mogę sprawdzić tego, co wysyła Angular. Nie wiem, czy jest jakiś sposób na debugowanie tego w Angularze (próbowałem console.log, ale nie działa), ale znalazłem inny sposób. Wszedłem na Symfony Profiler i miałem podgląd na ostatnie zapytania.

Ten debuger w Symfony, niesamowicie ułatwia pracę. Kilka kliknięć, porównanie z zapytaniem wysłanym z Postmana i już wszystko wiadomo. Brakuje nagłówka mówiącego, że wysłany obiekt, jest obiektem json, a nie plain-text. Wystarczyło dodać odpowiedni nagłówek i wszystko działa. Każde kolejne zapytanie było wysyłane wraz z tokenem. Tym sposobem zdebugowałem kod Angulara w debugerze Symfony.

Muszę teraz dodać sprawdzanie kodu błędu i kilka innych rzeczy, w następnym wpisie pokażę konkretne fragmenty kodu. Oczywiście najnowszą wersję można już znaleźć na GitHub.

Pozdrawiam!
MTK

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑