Как автоматично да излезете от потребител след изтичане на JWT на Angular

Снимка на Махдис Мусави на Unsplash

Така че четете няколко урока, може би сте се потопили малко в документацията и след известно време за кодиране имате хубаво първо ъглово приложение с всичко, което има за желание като начинаещ: гладък дизайн, материални компоненти, защитени маршрути с помощта на охрана и система за вход като част от бекенд, направен с NodeJS? или беше пролетта?

Всичко изглежда работи, докато, изчакайте, уеб токенът JSON изтече, но все още гледате този защитен изглед. Най-вероятно не е biggie, потребителят наистина не може да взаимодейства с бекенда, защото добре, токенът е изтекъл, но със сигурност това е детайл, който трябва да бъде излъскан. Въведете RxJS.

Ако сте кодирали това, шансовете сте, че вече сте докоснали някои RxJS и виждате куп наблюдения наоколо. Ако не наистина, ето едно бързо определение от уебсайта на проекта:

RxJS е библиотека за реактивно програмиране с помощта на Observables, за да се улесни съставянето на асинхронен или базиран на обратния код код.

Услуги за спасяване

Ще предположа, че имате логиката Auth в специализирана услуга за авт. Това е така, защото състоянието на потребителя не може да зависи от един компонент.

Без допълнително обожание, нека да разгледаме някакъв код.

Поток за удостоверяване на потребителя

В тази примерна реализация имаме основен 3 стъпки Auth поток, където потребителят влиза в системата (приложението се съхранява някъде на JWT), потребителят взаимодейства с бекенда, използвайки защитени маршрути / изгледи (Http заявките са прихванати и заглавието за упълномощаване е добавено за тях) и накрая потребителят излезе или JWT изтича, което от двете настъпи първо.

Логика на влизане

От нашия компонент за вход изпращаме потребителските идентификационни данни към бекенда. Ако всичко е наред, ние извикваме тогава метода storeUserData (), който записва JWT и потребителското име в Session Storage, изчислява оставащото време за изтичане на този маркер и най-накрая се обажда на нашия expirationCounter (), за да поеме работата.

Логика на брояча на изтичане на JWT

Нека сега да се справим с действителното изчакване за изчакване, за да изтече, за да реагираме. Първо, искаме да се отървем от предишни абонаменти. Правим това, като се обадим за отписване, прощаваме за съкращението, свойството Subscription, което дефинирахме в класа.

След това създаваме нова, нека да започнем с предаването на фалшив наблюдаем 'от (null)', от който ще направим закъснение от точно времето, което остава за JWT, и накрая, когато това се случи, ние извикваме нашия метод за излизане и насочваме потребителя към страницата за вход.

Логика на излизане

В метода за излизане първо се уверяваме, че сме се отписали от всеки текущ абонамент, напр. Потребителят излезе, преди да изтече сесията, и накрая изчистваме свойствата на класа и Session Storage от цялата информация, свързана със сесията.

За допълнителна информация вижте документите или още по-добре това супер полезно ръководство с примери, обяснения и ресурси за RxJS.

Благодаря за четенето.