Как сделать статус входа постоянным в Angular 2/3/4/5
В настоящее время я использую токен (также известный как идентификатор сеанса) в моем приложении Angular 5, где я передаю его в серверную часть в заголовке запроса, подобном этому;
const headersForJSON: HttpHeaders = new HttpHeaders (
{
'Content-Type': 'application/json',
'Accept': 'application/json'
}
);
который используется с каждым запросом. Если у клиента есть токен (т.е. пользователь вошел в систему), я добавляю еще один заголовок, подобный этому;
this.headers = headersForJSON.set("Authorization", v.authtoken);
Это отлично работает, если пользователь не перезагрузит приложение или не изменит URL-адрес в браузере вручную. Также, если пользователь щелкает правой кнопкой мыши ссылку маршрутизатора, чтобы открыть другое окно / вкладку в приложении.
В этих случаях среда Angular SPA теряется, а переменная authtoken не определена, поэтому нечего отправлять на серверную часть.
Есть ли стандартная практика для исправления этого?
Ответы 1
Стандартная практика - сохранять токен в локальном хранилище и повторно использовать его при необходимости.
При входе пользователя в систему сохраните токен в localstorage, а при выходе пользователя из системы удалите токен из localstorage.
Код
Сохраните в localstorage после входа в систему:
localStorage.setItem('token', Your_token);
Установка заголовка при запросе данных на сервере:
getHeader(){
let token = localstorage.getItem('token')? localstorage.getItem('token') : null;
return new HttpHeaders (
{
'Content-Type': 'application/json',
'Accept': 'application/json',
'token': token
}
);
}
Удалить токен при выходе пользователя из системы:
localStorage.removeItem('token');
Спасибо за указатель, который помог мне найти решение. Для Angular 5 я использовал npm package simple-ng5-storage, который хорошо справляется с хранением и извлечением объектов в локальное / сессионное хранилище.
Для менее опытных людей было бы полезно, если бы вы могли предоставить ссылки, показывающие, как это сделать (например, отличное сообщение в блоге, библиотека Angular), или предоставить некоторый код, который показывает высокий уровень того, что нужно делать.