使用BehaviorSubject重新加载时角度数据丢失

Question

我正在使用数据服务将用户数据发送到应用程序，并在标题组件中显示用户名。如果我使用登录组件登录我的应用程序，则正确显示了用户名，但是当我重新加载页面时，用户数据消失了。

登录时重新加载之前

重装后

用户数据来自使用BehaviorSubject的数据服务：

数据服务

export class DataService {

  private userSource = new BehaviorSubject({});
  currentUser = this.userSource.asObservable().pipe(distinctUntilChanged());

  constructor(private injector: Injector, private api: UtentiApiService) { }

  getUser() {
    return this.currentUser;
  }

  getUserFromToken() {
    const authService = this.injector.get(AuthService);
    const token = authService.getToken();
    const userIdToken = jwt_decode(token);
    // console.log(userIdToken);
    return this.api.getUtente(userIdToken.userId);
  }

  getPermissionsFromToken(): Observable<any> {
    const authService = this.injector.get(AuthService);
    const token = authService.getToken();
    const userIdToken = jwt_decode(token);

    return of(userIdToken.permArr);
  }
  changeUser(user: object) {
    this.userSource.next(user);
  }

}

在标头组件中，我使用该服务：

header.component.ts

export class HeaderComponent implements OnInit {
  user: object;

  constructor(private router: Router, private authService: AuthService, private data: DataService) { }


  ngOnInit() {
    this.getUser();
  }

  getUser() {
    this.data.getUser().subscribe(utente => {
      this.user = utente;
      console.log(this.user);
    });
  }

  onLogout() {
    this.authService.logoutUser();
  }

  sendUser(user) {
    this.data.changeUser(user);
  }
}

在登录组件中，我将用户数据发送到数据服务，但是在重新加载时，不会触发登录组件，因此，服务和标头中都没有用户数据。如何解决此错误？

这是一个带有完整代码的堆栈闪电战：https ://stackblitz.com/github/ufollettu/SEANSA

谢谢你的帮助

Answer 1

使用 SessionStorage 或 localStorage 或 cookie 来存储您的数据。

当您点击刷新时，将您的数据复制到上述任何存储中，并在初始化时将其复制回您的变量中。检查下面的例子。将 sessionStorage 替换为 localStorage 以将数据存储在 localStorage 中。

在 AppComponent 中

    ngOnInit() {
    if (sessionStorage.getItem("user")) {
      this.data.changeUser(sessionStorage.getItem("user"));
    }
      }
@HostListener('window:beforeunload', ['$event'])
      unloadNotification($event: any) {
        sessionStorage.setItem("user", this.getUser());
      }

Answer 2

从您的代码：

private userSource = new BehaviorSubject({});
  currentUser = this.userSource.asObservable().pipe(distinctUntilChanged());

  constructor(private injector: Injector, private api: UtentiApiService) { }

  getUser() {
    return this.currentUser;
  }

您的 userSource 是一个 BehaviorSubject，它在您启动应用程序时（也在重新加载时）不包含任何内容。

当您登录用户时，您调用：

changeUser(user: object) {
    this.userSource.next(user);
  }

在此调用之后，您的 BehavoirSubject 包含一个用户。但是您只能在登录过程中执行此操作。

当您重新加载页面时，您需要从 localstorage 获取访问令牌，并使用当前用户在 BehavoirSubject 上调用 next。

例如，您可以在 dataService 的构造函数中执行此操作。