Interceptor? Po co mi? Czym jest?

Zależy mi na tym, by każde wysłane zapytanie typu GET pobrało dane w odpowiednim języku. Backend oczekuje ode mnie przesłania w headerze parametru lang, który będzie miał ustawiona wartość odpowiadającą językowi, w jakim chce otrzymać dane. Aktualnie będzie to ‘en’, ‘pl’, ‘de’ odpowiednio dla angielskiego, polskiego i niemieckiego.
W każdym zapytaniu dodawanie parametru? Przecież to nadmiarowość kodu. Tu z pomoca przychodzi nam INTERSEPTOR (“przechwytywacz”). Po co nam on? Interseptor przechwyci wychodzący HttpRequest i opcjonalnie przekształci go lub odpowiedź. W naszym przypadku interseptor doda do headera każdego zapytania typu GET parametr lang.
A jak wygląda to w kodzie? Po pierwsze tworzymy plik – u nas będzie się nazywał  language.interceptor.ts. Dołączamy niezbędne importy, tworzymy szkielet
oraz tworzymy warunek odpowiadający za dodanie do zapytania parametru

Cały nasz plik language.interceptor.ts wygląda następująco:


 

Krok drugi – teraz trzeba dodać interseptor do app.module.
 
Ale, ale… w pliku  language.interceptor.ts mamy pobieranie localStorage.getItem(‘lang’). W tym celu krok trzeci, czyli w app.component.ts w konstruktorze, ustawiamy domyślną wartość zmiennej w localStorage na ‘pl’. Wcześniej jednak sprawdzamy czy już wcześniej nie została wybrana wersja językowa i nie ma już określonej wartości w localStorage. Dodatkowo przygotowujemy funkcję  updateLang(), którą będziemy wywoływać w przypadku wybrania przez użytkownika innej wersji językowej (app.component.html).
 
 
app.component.ts

 

app.component.html

Krótkie podsumowanie tego, co zrobiliśmy

Podsumowując, użytkownik początkowo widzi wersję polską strony (localStorage ustawione na ‘pl’). Po wybraniu innej wersji językowej uaktualniona zostaje odpowiednia wartość w localStorage (‘en’/’de’). Przy każdym zapytaniu o dane, strona korzysta z localStorage i dodaje odpowiedni parametr do zapytania wysyłanego do backendu.
Mam nadzieję, że teraz wszystko jasne 🙂

Author: