我的角度服务在不同组件之间失去状态

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主题-参见此处：

export class AppComponent {
  title = 'Hunter';

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

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

我想念什么？

Answer 1

[请不要仅依靠Angular服务来维护用户会话详细信息，因为当用户重新加载应用程序时，Angular服务会失去状态。

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

谢谢

Answer 2

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

您也应该不要在服务之外公开您的主题，最好将其设置为私有并以某种可观察的方式从某种公共方法返回它。

在这种情况下使用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);
  }

}