Question

我有一个名为“ Services.Module”的设置，它了解可注入的服务。它被加载到“导入”下的“ app.module”中。一切正常，该应用程序可以通过调用多个服务上的端点来正常运行。但是，在授权服务上，我会拨打类似于以下内容的电话：

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

问题是，如果我在浏览器上，然后手动执行（根）/类别，则AuthService上的'jwt'静态变量将设置为undefined。 如果我想保留一个可以全局设置和重设并参考它的变量，而又不将其变成为警卫而重设的实例，那么Angular 6中的最佳做法是什么？ “直到现在刷新令牌”，直到我刷新浏览器或重新启动应用程序，我都希望您的状态保持不变。

Answer 1

此变量jwt不需要声明为静态。 Angular中的服务是单例，因此在此变量的AuthService值的每个实例中都是相同的。

@编辑 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状态发生变化，您将不会在此特定组件中注意到这一点。

Angular 6静态变量不断重置为“未定义”

1 个答案: