typescript – 如何在Angular 2中实现等待连接的AuthGuard

发布时间：2020-12-17 10:21:16 所属栏目：安全来源：网络整理

导读：我正在使用Angular 2(RC.3)和@ angular / router alpha.8创建一个Web应用程序. 这个新路由器提供“Guard”,它帮助我们实现处理授权重定向. 正式文档写了如何创建和使用Guard,但其示例代码没有考虑连接时间. https://angular.io/docs/ts/latest/guide/router.

我正在使用Angular 2(RC.3)和@ angular / router alpha.8创建一个Web应用程序.
这个新路由器提供“Guard”,它帮助我们实现处理授权重定向.

正式文档写了如何创建和使用Guard,但其示例代码没有考虑连接时间.
https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

所以我想在其中使用Observable(或Promise).

export class ApiService {
  constructor(private _http: Http) {}
  head(url: string): Observable<any> {
    const req: any = { method: RequestMethod.Head,url: URI_SCHEME + url };

    return this._http.request(new Request(req));
  }
}

export class AuthGuard implements CanActivate {
  constructor(private _api: ApiService) {}

  canActivate(): Observable<boolean> {
    return this._api.head('/users/self').subscribe(
      (): Observable<boolean> => {
        // when gets 200 response status...
        return Observable.of(true);
      },(): Observable<boolean> => {
        // when gets 401 error response...
        // TODO: redirect to sign-in page.
        return Observable.of(false);
      }
    );
  }
}

但在上面的代码中,canActivate()函数返回Subscription实例,因为Observable.prototype.subscribe()返回Subscription.

我该怎么办？

只需使用map()而不是subscribe().路由器自己进行订阅以发起请求.

别忘了导入地图Angular 2 HTTP GET with TypeScript error http.get(…).map is not a function in [null]

我认为这应该做你想要的：

export class AuthGuard implements CanActivate {
  constructor(private _api: ApiService) {}

  canActivate(): Observable<boolean> {
    return this._api.head('/users/self')
    .map(response => {
      this.doSomethingWithResponse(response.json()));
      return true;
    })
    .catch(err => Observable.of(false));
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!