Angular 8 очистка localStorage при выходе

Question

Я использую localStorage для токена авторизации. для сохранения я использую localStorage.setItem('token','value') и для удаления я использую localStorage.clear() и оба работают нормально. Но когда я вошел в систему с другим пользователем, конструктор службы до отправки предыдущего токена, который фактически удален из localStorage(). Сервисный конструктор ниже

  token: string;
  constructor(private http: HttpClient) {
    const user = JSON.parse(localStorage.getItem('eq_user'));
    if ( user ) {
      this.token = user.access_token;
    }
  }

Логин:

login() {
  this.auth.login(data).subscribe((response: UserToken) => {
    localStorage.setItem('eq_user', JSON.stringify(response));
    this.router.navigate([this.returnUrl]);
  },
  error => {
    this.error = true;
    this.errorMsg = error.message;
  }
}

Выйти

onLogout() {
    localStorage.removeItem('eq_user');
    localStorage.clear();
    this.authService.logout().subscribe( s => {
        this.route.navigate(['login']);
   });
  }

следующая ссылка идентична моей проблеме.

https://stackblitz.com/

Сначала нажмите setValue, а затем нажмите A в компоненте и A в сервисе, в первый раз он примет правильное значение. Но когда вы снова нажимаете на setValue, а затем нажимаете на две другие кнопки, кнопка «Компонент» возвращает новое значение, но служба не возвращает новые значения.

Answer 1

Конструктор одноэлементной службы вызывается только один раз, во время загрузки приложения. Я предполагаю, что ваш сервис синглтон. Таким образом, логика, написанная внутри конструктора, не будет выполняться более одного раза. Вы также должны установить токен внутри метода входа в систему, который запускается каждый раз при входе пользователя в систему. Также удалите маркер при выходе пользователя из системы.

login() {
    this.auth.login(data).subscribe((response: UserToken) => {
      this.token = response.access_token;
      localStorage.setItem('eq_user', JSON.stringify(response));
      this.router.navigate([this.returnUrl]);
    },
    error => {
      this.error = true;
      this.errorMsg = error.message;
    }
  }


onLogout() {
    this.token = null;
    localStorage.removeItem('eq_user');
    localStorage.clear();
    this.authService.logout().subscribe( s => {
        this.route.navigate(['login']);
   });
  }

Я обновил ваш пример стекаблица с изменениями, которые я упомянул выше - https://stackblitz.com/edit/angular-cz5huh

Answer 2

Смотрите, угловые сервисы - это одиночные сервисы, когда они объявлены в корне. Таким образом, ваш конструктор будет вызываться только один раз, и тогда он будет хранить токен. Поэтому, когда вы очищаете локальное хранилище, вы должны очистить переменную. Вы можете создать функцию очистки в вашем сервисе для очистки переменной токена. И вызывайте эту функцию при выходе из системы.

Answer 3

Потратив почти день на отправку свежего токена, я пришел к решению, что это легко сделать с помощью HttpInterceptor, если вы определяете пользовательский перехватчик для заголовков, вам не нужно искать токенк вашим услугам перехватчик добавит жетон предъявителя ко всем запросам http.

Нажмите здесь для получения более подробной информации