My angular service loses state across different components

Question

The service's only purpose is to keep track of if the user is still logged in or not. (I'm in version 8 of angular)

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

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

I have two different navbars (navbar, navresearch). navresearch has a button to send the user back to the main navbar page. The navbar content depends on whether the user is logged in or not.

app.module does not have this service in providers:

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

As you can see it starts in AppComponent where I thought I could initialize the RxJs Subject by calling the function shown above - see here:

export class AppComponent {
  title = 'Hunter';

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

Switching pages back to the navbar (main) page causes app.component to be initialized again and thus the RxJs subject gets reinitialized - and I lose user login status.

What am I missing?

Answer 1

Please don't depend on the Angular services alone to maintain the user session details, as when the user reloads the application angular services will loose the state.

Please save the user logged in data to the localStorage or sessionStorage based on the requirement.

Thanks