javascript - Angular 2 : AuthGard renders the page before it checks whether SecurityContext is applied or not

Question

我正在使用 Angular，并尝试在某些路径上应用一些 AuthGard。

问题是 canActivate() 在检查 SecurityContext 之前呈现内容，在验证没有应用 SecurityContext 之后，会应用重定向到默认页面(登录)页面。

这是负责此操作的代码部分。

<小时/>

app.routing.ts

    {
      path: 'admin',
      canActivate: [AuthGard],
      component: HomeComponent,
      children : [
        {
          path: 'add-merchant-admin',
          component : AddMerchantAdminComponent,
        },
        {
          path: 'list-merchant-admin',
          component : ListMerchantAdminComponent,
        }
      ]
    },

<小时/>

AuthGard.ts

  canActivate(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    this._authService.getRoles().subscribe(
      res => {
        if (res.status == 200) {
          this.roles = JSON.parse(res.text());
          this.role = this.roles[0].authority;
          localStorage.setItem('role', this.role);
          if (this.role == 'ROLE_ADMIN') {
            this._router.navigate(['admin']);
          } else {
            if (this.role == 'ROLE_ANONYMOUS') {
              this._router.navigate(['login']);
              this.error = false;
            }
          }
        } else {
          this._router.navigate(['login']);
          this.error = true;
        }
      }, err => {
        this._router.navigate(['login']);
        this.error = true;
      }
    );
    return !this.error;
  };

<小时/>

AuthService

  getRoles() {
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers, withCredentials: true});
    return this.http.get('http://10.0.0.239:8080/**/**/RolesResource/getRole', options)
      .map((res) => res)
      .catch((error: any) => Observable.throw(error.text() || 'Server error'));
  }

所有服务均已正确注入(inject)，通常，在使用 getRole() 方法进行验证后，应应用重定向到 protected 区域或默认页面。

Answer 1

您遇到的问题是 this._authService.getRoles() 进行异步网络调用。 return !this.error; 在网络调用返回之前被触发，因此 !this.error 不会改变，因此仍然是 true。

要解决此问题，您应该能够返回一个可观察对象，如下所示:

return this._authService.getRoles().map(
  res => {
    if (res.status == 200) {
      this.roles = JSON.parse(res.text());
      this.role = this.roles[0].authority;
      localStorage.setItem('role', this.role);
      if (this.role == 'ROLE_ADMIN') {
        this._router.navigate(['admin']);
      } else {
        if (this.role == 'ROLE_ANONYMOUS') {
          this._router.navigate(['login']);
          return false;
        }
      }
    } else {
      this._router.navigate(['login']);
      return true;
    }
  }).catch((err) => {
    this._router.navigate(['login']);
    return Observable.of(false);
  }
);