我的 angular 服务在不同组件之间丢失状态

Question

该服务的唯一目的是跟踪用户是否仍处于登录状态。（我现在是 angular 的第 8 版）

@Injectable({
   providedIn: 'root',
})
export class LoginStatusService {
  subject: any;

  initialCreate() {
    this.subject = new Subject();
    this.subject.next(false);
  }
}

我有两个不同的导航栏（navbar、navresearch）。 navresearch 有一个按钮可以将用户送回主导航栏页面。导航栏内容取决于用户是否登录。

app.module 提供商中没有此服务：

  ],
   providers: [
      AuthService,
      ErrorInterceptorProvider
   ],
   bootstrap: [
      AppComponent

如您所见，它从 AppComponent 开始，我认为我可以通过调用上面显示的函数来初始化 RxJs Subject - 请参见此处：

export class AppComponent {
  title = 'Hunter';

  constructor(private LoggedIn: LoginStatusService) {
    this.LoggedIn.initialCreate();   **<--**
  }
}

将页面切换回导航栏（主）页面会导致 app.component 再次初始化，因此 RxJs 主题被重新初始化 - 我失去了用户登录状态。

我错过了什么？

Answer 1

如果您想使用主题，您可能想要使用 BehaviorSubject 以便迟到的订阅者也能获得正确的登录状态。我还建议像评论中的许多其他人一样在服务构造函数方法中初始化主题。初始化服务不是单个组件的责任。就像您注意到组件被销毁并重新初始化一样，但您的应用程序也可以先加载另一个组件，然后该服务将永远不会被初始化，并且当您稍后使用它时，它不会 return 任何结果。

您也不应将您的主题暴露在服务之外，最好将其设为私有并 return 通过某些 public 方法将其作为可观察对象。

在这种情况下使用 BehaviorSubject 的另一个优点是您还可以直接获取值（而不是作为可观察值），这对于您需要当前状态的一次性用户案例非常实用苍蝇。这里有一个关于您的服务的示例。我不知道你从哪里得到初始状态（本地存储、会话、cookie）所以我创建了一些虚构的依赖关系。

@Injectable({
   providedIn: 'root',
})
export class LoginStatusService {

  private loggedIn: BehaviorSubject<boolean>;

  constructor(dependencyProvidingLoginStatus: LoginStatusProvider) {
    this.initalize();
  }

  initialize() {
    const loggedIn = this.dependencyProvidingLoginStatus.isLoggedIn();
    this.loggedIn = new BehaviorSubject(loggedIn);
  }

  public getLoginStatus(): boolean {
    this.loggedIn.getValue();
  }

  public getLoginStatusObservable(): Observable<boolean> {
    this.subject.asObservable();
  }

  // should maybe not be public? Try to solve this inside your service?
  public changeStatus(value: boolean) {
    this.loggedIn.next(value);
  }

}

Answer 2

请不要单独依赖 Angular 服务来维护用户会话详细信息，因为当用户重新加载应用程序时 angular 服务会丢失状态。

请根据需要将用户登录数据保存到localStorage或sessionStorage。

谢谢

我的 angular 服务在不同组件之间丢失状态

My angular service loses state across different components

service

singular

rxjs

typescript

angular