首页 > 解决方案 > Angular 6静态变量不断重置为“未定义”

问题描述

我有一个了解可注入服务的“Services.Module”设置。它被加载到“imports”下的“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”静态变量设置为未定义。 如果我想保留一个变量,我可以设置和重置 GLOBALLY 和 REFERENCE IT 而不会变成为守卫重置的实例,Angular 6 中的最佳实践是什么? 我基本上只想去'token you now are blahblahblah',直到我刷新浏览器或重新启动应用程序,我希望你的状态保持不变。

标签: angularroutingangular6angular-route-guards

解决方案


推荐阅读