Як аўтаматычна выйсці з карыстальніка пасля заканчэння тэрміна JWT на Angular

Фота Махдзіса Мусаві на Unsplash

Такім чынам, вы прачыталі некалькі навучальных дапаможнікаў, магчыма, трохі пагрузіліся ў дакументацыю і праз некаторы час якаснага кадавання вы атрымаеце выдатнае першае вуглавае прыкладанне з усім, што ёсць жаданне пачаткоўцу: гладкі дызайн, матэрыяльныя кампаненты, абароненыя маршруты з дапамогай ахоўных і сістэма ўваходу ў сістэму бэкэнда з NodeJS? ці гэта была вясна?

Здаецца, усё працуе, пакуль не пачакайце, тэрмін дзеяння JSON Web Token скончыўся, але вы ўсё яшчэ глядзіце на гэты ахоўны выгляд. Хутчэй за ўсё, гэта не больш, карыстальнік не можа ўзаемадзейнічаць з бэкэндам, бо нумар токена скончыўся, але дакладна гэта дэталь, якую трэба адшліфаваць. Увядзіце RxJS.

Калі вы закадзіравалі гэта, шанцы вы ўжо закранулі некаторыя RxJS і ўбачылі кучу назіранняў вакол. Калі не на самай справе, вось кароткае вызначэнне з сайта праекта:

RxJS - гэта бібліятэка для рэактыўнага праграмавання з выкарыстаннем Observables, каб палегчыць стварэнне асінхроннага кода або на аснове званка.

Службы па выратаванні

Я мяркую, вы маеце логіку Auth у спецыяльнай службе аўтэ. Гэта таму, што статус карыстальніка не можа залежаць ад аднаго кампанента.

Без лішніх слоў, давайце разгледзім нейкі код.

Паток аўтэнтыфікацыі карыстальніка

У гэтай рэалізацыі ўзору ў нас ёсць асноўны 3-х этапны паток Auth, у якім карыстальнік ўваходзіць у сістэму (прыкладанне захоўваецца дзе-небудзь у JWT), карыстальнік узаемадзейнічае з заднім ходам, выкарыстоўваючы абароненыя маршруты / погляды (Http-запыты перахопленыя і дададзены загаловак аўтарызацыі. і, нарэшце, карыстальнік выходзіць з сістэмы, альбо тэрмін дзеяння JWT заканчваецца, што залежыць раней.

Логіка ўваходу

З нашага кампанента ўваходу, мы адпраўляем уліковыя дадзеныя карыстальніка ў рэзервовы. Калі ўсё ў парадку, мы называем метад storeUserData (), які захоўвае JWT і імя карыстальніка ў Session Storage, вылічвае час, які застанецца для гэтага маркера, і, нарэшце, выклікае наш expecCounter (), каб узяць на сябе заданне.

Логіка лічыльніка тэрміну дзеяння JWT

Давайце цяпер разбярэмся з рэальным чаканнем рэагавання. Спачатку мы хочам пазбавіцца ад папярэдніх падпісак. Мы робім гэта, патэлефанаваўшы на падпіску, прабачце надмернасць, уласцівасць падпіскі, якую мы вызначылі ў класе.

Затым мы ствараем новы, давайце пачнем яго, перадаўшы падробленую назву "of (null)", пасля чаго мы закінем роўна колькасць часу, якое засталося JWT, і нарэшце, калі гэта адбудзецца, мы называем наш спосаб выхаду і накіроўваем карыстальніка на старонку ўваходу.

Логіка выхаду

У метадзе вываду мы спачатку пераканайцеся, што мы адпісаліся ад любой падпіскі, напрыклад, карыстальнік выйшаў да таго, як скончыўся сеанс, і, нарэшце, мы ачысцім уласцівасці класа і захоўвання сесіі з усёй інфармацыі, звязанай з сеансам.

Для атрымання дадатковай інфармацыі азнаёмцеся з дакументамі ці нават лепш з гэтым супер карысным кіраўніцтвам з прыкладамі, тлумачэннямі і рэсурсамі для RxJS.

Дзякуй за чытанне.