Angular 2 : AuthGard 在检查是否应用了 SecurityContext 之前呈现页面

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

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

Answer 1

而不是 returning return !this.error; 这总是正确的，尝试 return

 canActivate(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        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;
            }
          }, err => {
            this._router.navigate(['login']);
            return Observable.of(false);
          }
        );
      };

已编辑

Answer 2

您可以尝试使用 return observable，它可以更新为 true 或 false。

Answer 3

像这样的东西应该可以工作

canActivate(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this._authService.getRoles()
        .map(response => JSON.parse(response.text())[0].authority)
        .do(role => localStorage.setItem('role', role))
        .map( role => role === 'ROLE_ADMIN')
        .catch(() => this._router.navigate(['login']));
};

Answer 4

您遇到的问题是 this._authService.getRoles() 进行异步网络调用。 return !this.error; 在网络调用被 returned 之前被触发，所以 !this.error 没有改变，因此仍然是真实的。

要解决此问题，您应该能够 return 观察如下：

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

Angular 2 : AuthGard 在检查是否应用了 SecurityContext 之前呈现页面

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

javascript

authentication

router

angular