Данные с сервера не меняются после входа под другим пользователем в angular

Question

Я создаю приложение с angular и использую http-запрос к бэкэнду, но есть ошибка, и я не знаю, как это произошло, мой бэкэнд-программист тоже.

Пример. "

then i click logout (of course i clean the localstorage when user logout)

and login using "admin" user account but this is what i get when i login using "admin" account

my app still showing my latest login user, i check the token for that 2 account, and it's the same token, but when i reload the page finally it's showing "admin" user

Answer 1

Ваш компонент заголовка не обнаруживает изменения в localStorage (обязательно, если вы нажмете F5, вы увидите "admin")

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

import {Subject} from 'rxjs'
import {tap} from 'rxjs/operators'

userChange:Subject<any> =new Subject<any>()

И в логине вы можете использовать канал (тап)

  this.auth.login(this.loginForm.value).pipe(
      tap(res=>this.userChange.next(res.data))
      .subscribe(.....)

Затем в компоненте заголовка

ngOnInit()
{
   this.loginService.userChange.subscribe(res=>{
     ..change the name..
   })
}

Обновлено

ПРИМЕЧАНИЕ: я предполагаю, что вы получаете имя пользователя из локального магазина в ngOnInit, чтобы не повторять код, вы можете обратиться за другим.

В сервисе, не Не используйте трубу (кран). Просто добавьте метод, который вы можете вызвать в подписке

  //in your service
  loginSuccessfull()
  {
       this.userChange.next(res.data)
  }

Затем в вашем компоненте сразу после сохранения в localStore вызовите эту функцию

  this.auth.login(this.loginForm.value)
      .subscribe(
       .....
       //emit the subject if login calling the function
       this.auth.loginSuccessfull()
       )

И в вашем компоненте заголовка используйте pipe (startWith)

import {startWith} from 'rxjs/operators'

ngOnInit()
{
   this.loginService.userChange.pipe(
     startWith(null))
     .subscribe(res=>{
       ..get the name from localStore..
   })
}

ПРИМЕЧАНИЕ: я считаю, что лучше хранить в localStore в service, тогда вы можете выдать значение после сохранения в localStore, и вам не нужно создавать loginSuccesfull

login(body: any) {
    return this._http.post(this.apiURL + 'login', body, {
      observe: 'body'
    }).pipe(tap(res=>{
        ...store in localStore...
        this.userChange.next(res.data)
    });
  }