Vue.js przechowywanie informacji o zalogowanym użytkowniku

Question

Hej, po zalogowaniu się użytkownika przechowuję jego token w localStorage, zasadniczo dzięki temu łatwo też można sprawdzić czy użytkownik jest zalogowany. Jednak chciałbym mieć też dostęp do jego imienia, nazwiska, avatara albo tego czy jest użytkownikiem premium. Nie chciałbym za każdym razem pobierać takich danych. Imię i nazwisko + avatar np wyświetlają się w menu więc byłyby pobierane za każdym razem, jak można to rozwiązać?

Teoretycznie po logowaniu można by w localStorage przechowywać cały obiekt użytkownika, nie jestem jednak pewien czy to dobry pomysł.

Spodziewam się że można użyć Vuex, tutaj jednak prosiłbym o więcej szczegółów co i jak aby to zrobić

Dzięki za sugestię.

Answer 1

Vuex służy do przechowywania globalnego stanu aplikacji i w przypadku informacji o zalogowanym użytkowniku jest bardzo dobrym rozwiązaniem. Będziesz miał prosty dostęp do tych danych z każdego miejsca w kodzie. Po szczegóły implementacyjne zapraszam do dokumentacji

Dodatkowo w kontekście uwierzytelniania warto zastosować dwie techniki

1. Jeśli istnieje token, należy odpytać API o dane użytkownika PRZED inicjalizacją instancji vue. Dzięki temu zgrabnie można obsłużyć przekierowania na stronę logowania, gdy niezalogowany użytkownik próbuje dostać się pod adres wymagający uwierzytelnienia (i w drugą stronę, gdy zalogowany użytkownik próbuję dostać się pod adres logowania)

2. Jeśli API potrafi zwrócić błąd stricte o tym, że dany token nie jest zalogowany w systemie, należy dodać obsługę takiego błędu w interceptorze klienta HTTP i automatycznie wylogować użytkownika. W sytuacji gdy użytkownik stracił ważność tokena, a nadal ma otwartą aplikację - jakakolwiek akcja go wyloguje, zamiast przenosić na stronę błędu

Comments

okej, ale taki obiekt powinien być gdzieś przechowywany (obiekt użytkownika oczywiście) czy wykorzystać Vuex do pobierania danych za każdym razem?

---

Dane użytkownika pobierasz raz na starcie aplikacji i zapisujesz je w storze (vuex)

---

Okej, do zapisywania danych użyłem vuex-persistedstate żey dane utrzymywały się po odświeżeniu. Jednak o ile dane użytkownika i dane o logowaniu mogę zmienić po zalogowaniu to przechowuję jeszcze inne ustawienia aplikacji które chciałbym aby były pobierane od nowa za każdym razem po wejściu na stronę lub powiedzmy co 1h. Da się to zrobić?

---

tak, przed startem aplikacji wypełnić store potrzebnymi danymi (w main.js o ile dobrze pamiętam)

---

okej, ale w main.js pobrać od nowa dane z bazy i wypełnić store?

---

tak, wszystko, co potrzebujesz przed uruchomieniem aplikacji sciągaj w tym miejscu