Статическая переменная Angular 6 продолжает сбрасываться до «неопределенного»

Question

У меня есть настройка «Services.Module», которая знает о службах для инъекций.Он загружается в app.module в разделе import.Все работает, и приложение прекрасно работает с вызовами к конечным точкам на нескольких сервисах.Однако в службе авторизации у меня есть вызов, подобный следующему:

@Injectable()
export class AuthService {
    private endpoint = `${environment.baseApi}/auth`;
    private headers: HttpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
    //Can set this to a regular instance variable and same problem occurs
    public static jwt: JWT;

    constructor(private http: HttpClient) { }

    public createAuthToken(user: UserModel): Observable<JWT> {
        return this.http.post<JWT>(`${this.endpoint}/createUserToken`, user, { headers: this.headers})
    }

    get getJWT() {
        return AuthService.jwt;
    }
}

Я вызываю его с помощью компонента входа, такого как:

 .subscribe((str: string) => {
       ...
        var u = ...
        this.authService.createAuthToken(u)
          .subscribe((jwt: JWT) =>  
          {
            //works just fine
            AuthService.jwt = jwt;
            this.router.navigate(['/Category']);
          })

Для маршрутов настроена защита маршрута следующим образом:

path: 'Category',
canActivate: [LoginGuard],
component: CategoryComponent

Охранник получает удар и все в порядке, когда мир загружается, как показано ниже:

@Injectable()
export class LoginGuard implements CanActivate, CanLoad {
  constructor(private authService: AuthService,
    private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      return this.checkLoggedIn(state.url);
  }

  canLoad(route: Route): boolean {
      return this.checkLoggedIn(route.path);
  }

  checkLoggedIn(url: string): boolean {
      console.log(`jwt is: ${this.authService.getJWT}`);
      if(this.authService.getJWT != null) {
          return true;
      }
      console.log("Must be logged in first");
      this.router.navigate(['/login']);
      return false;
  }
}

Проблема в том, что если я нахожусь в браузере, а затем вручную(root) / Category Статическая переменная 'jwt' в AuthService установлена ​​в неопределенное значение. Если я хочу сохранить переменную, которую я могу установить и сбросить ГЛОБАЛЬНО, и ОТКАЗАТЬ ЕГО, не превращая ее в экземпляр, который будет сброшен для охраны, какова лучшая практика в Angular 6? Я в основном хочу просто уйти 'теперь вы бла-бла, пока я не обновлю браузер или не перезапущу приложение, я ожидаю, что ваше состояние останется прежним.

Answer 1

Эта переменная jwt не должна быть объявлена ​​как статическая.Службы в Angular являются синглетонами, поэтому в каждом случае AuthService значение этой переменной будет одинаковым.

@ Edit PS.Если переменная jwt является условием, если пользователь вошел в систему или нет, вы должны получить ее асинхронным способом, например, из Subject Пример:

private jwt$ = new Subject<string>();

get jwt() {
    return this.jwt$.asObservable();
}

set jwt(value: string) {
    this.jwt$.next(value);
}

Благодаря этому вы можете сохранять правильное состояние всегоприложение и каждый компонент, потому что вы можете подписаться на состояние этой переменной и ее изменений.

Если jwt является синхронным, то вы можете проверить значение этой переменной только в ngOnInit() или любом другом жизненном цикле Angular.метод.Тогда, если jwt состояние изменится, вы не заметите этого из этого конкретного компонента.