Мой angular сервис теряет состояние по разным компонентам

Question

Единственная цель службы - отслеживать, вошел ли пользователь в систему или нет. (Я нахожусь в версии 8 angular)

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

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

У меня есть две разные панели навигации (navbar, navresearch). navresearch имеет кнопку для отправки пользователя обратно на главную страницу navbar. Содержимое панели навигации зависит от того, вошел ли пользователь в систему или нет.

app.module не имеет этой службы в поставщиках:

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

Как вы можете видеть, она начинается в AppComponent, где я Я подумал, что могу инициализировать объект Rx Js, вызвав функцию, показанную выше - см. здесь:

export class AppComponent {
  title = 'Hunter';

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

Переключение страниц назад на главную страницу navbar приводит к повторной инициализации app.component и, таким образом, Rx Js Субъект повторно инициализируется - и я теряю статус пользователя.

Чего мне не хватает?

Answer 1

Пожалуйста, не полагайтесь только на сервисы Angular, чтобы поддерживать детали сеанса пользователя, так как при перезагрузке приложения сервисы angular теряют состояние.

Пожалуйста, сохраните пользователя, вошедшего в систему. данные в localStorage или sessionStorage на основе требования.

Спасибо

Answer 2

Если вы хотите использовать тему, вы, вероятно, хотите использовать BehaviorSubject, чтобы поздние подписчики также получали правильный статус входа. Я также рекомендую, как и многие другие, в комментариях инициализировать тему в методе конструктора службы. Это не обязанность одного компонента инициализировать сервис. Как вы заметили, компоненты уничтожаются и повторно инициализируются, но ваше приложение может сначала загрузить другой компонент, затем служба никогда не будет инициализирована, и при последующем использовании она не вернет никакого результата.

Вы также не должны подвергать себя Ваш объект вне службы, было бы лучше сделать его закрытым и вернуть его из какого-либо метода publi c в качестве наблюдаемого.

Еще одним преимуществом использования BehaviorSubject в этом случае является то, что вы также можете просто получите значение напрямую (а не как наблюдаемое), что может быть полезно для случаев, когда вам нужен текущий статус на лету. Вот пример того, как может выглядеть ваш сервис. Я не знаю, откуда вы получаете исходный статус (локальное хранилище, сессия, повар ie), поэтому я создал некоторую воображаемую зависимость.

@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);
  }

}