Cześć, jak prawidłowo powinno się planować logikę aplikacji korzystając z reduxa z uwzględnieniem użytkownika który pozostaje zalogowany po zamknięciu karty w przeglądarce?
Napisałem backend w nodeJs. Jest opcja rejestracji i logowania. Przy logowaniu dostajemy JWT. Część zapytań jak np. pobieranie profilu czy dodawanie postów ma middleware które sprawdza czy użytkownik posiada ważny token. Jak to jest przy pierwszym włączeniu strony po wcześniejszym zamknięciu karty? Token jest dalej przechowywany w localStorage i powinienem odpalać jakiegoś requesta który sprawdza czy użytkownik jest zalogowany? Włączasz stronę i mimo tego że jesteś zalogowany (masz ważny token w localStorage) button login/logout jest ustawiony na "login" bo strona nie wie że jesteś zalogowany. Chciałbym żeby użytkownik wiedział że jest zalogowany i ma dostęp do swojego profilu w sytuacji kiedy wpisze dowolny adres. Gdzie ustawić takiego requesta? Pomyślałem że w Headerze bo lece na React-Router i to jedyna część aplikacji która nigdy się nie zmienia i nie wymusza requestów w kółko bez potrzeby. A może przy zamontowaniu samej aplikacji? Grzecznie proszę o podpowiedź gdzie ustawia się takie rzeczy albo jak to zrobić żeby działało jak w komercyjnym projekcie. :)) Z góry dziękuję za odpowiedzi.
Trzymanie tokenu w localstorage to złe rozwiązanie KROPKA. Każda ekspozycja na XSS spowoduje krytyczne naruszenie bezpieczeństwa.
Teoretycznie można zabezpieczyć się przez XSS, ale korzystając ze współczesnych bibliotek i frameworków nie podjąłbym takiego ryzyka, bo przecież nie analizujesz każdej zależności.
Już lepszym rozwiązaniem jest stosowanie ciastka z flagami HttpOnly i Secure, a także w razie decyzji SameSite. Potencjalnie jest ryzyko ataku CSRF, ale jemu akurat można (relatywnie) skuteczniej przeciwdziałać.
Oczywiście przy przechowywaniu krytycznie ważnych danych większość organizacji decyduje się na nie przetrzymywanie tokenu dłużej niż parę minut.
PS. Mówię poważnie, nie trzymaj tokenu w localstorage, bo to jest taka wiocha, jak jazda samochodem na promilach.
Dobrze, wezmę to sobie do serca :D a co z kwestią miejsca w którym sprawdzam czy użytkownik jest zalogowany?
tldr;
doklejasz w headerze.
Całość
No to zależy jaką wybierzesz strategię autoryzacji. Jeżeli przez jwt w requeście to coś w stylu:
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer eyJhbGc...");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch("https://jakiśares, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
A na backendzie przez middleware, np. http://www.passportjs.org/packages/passport-jwt/
ps. Możesz oczywiście sam implementować przeszukiwanie headerów.
Nie o to mi chodzi :) chodzi mi o mechanizm ktory sprawdza czy użytkownik jest zalogowany po włączeniu strony. Pojedyncze requesty działają świetnie. Mam wszystko ogarnięte w miarę. A więc : jak sprawdzic czy użytkownik ma ważny token przy załadowaniu strony. Tak żeby od razu wyrenderowac odpowiedni login/logout button i udostępnić funkcję ustawień konta. Czy praktykuje się coś w stylu requesta "isLoggedIn" przy renderiwaniu aplikacji?
Zaladowanie strony tez jest reqestem, wiec tak samo doklejasz token do headera, a dalej przekierowuje routing.
Inaczej, jak korzystasz z react, to pobierasz tylko tresc spa, a wewnatrz robisz routing oparty o reqesuty.
Ps. Ogarnij react-router i nie grzesz wiwcej ( trzymajac tokeny w localstorage)
Nie będę :D problemem jest to że wszystkie poradniki z których korzystałem używają localStorage. :d pewnie dlatego że jest to najprostsza możliwa implementacja na jedną linijkę kodu. Dzięki za rady. :)