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

Question

服务的唯一目的是跟踪用户是否仍在登录。(我在angular的版本8中(

@Injectable({
providedIn: 'root',
})
export class LoginStatusService {
subject: any;
initialCreate() {
this.subject = new Subject();
this.subject.next(false);
}
}

我有两个不同的导航栏(导航栏，导航研究(。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

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

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

感谢

Answer 2

如果您想使用Subject，您可能需要使用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);
}
}