在Angular 2中进行身份验证,处理可观察对象

时间:2016-05-06 00:03:03

标签: angularjs authentication angular angular2-routing

我刚开始使用Angular 2项目,并且正在尝试启动并运行身份验证。灵感来自this tutorial我决定做以下事情:

  • 创建一个自定义的RouterOutlet类(扩展它),以便在调用url时处理身份验证逻辑。

我成功完成了这个自定义类,但我仍然不确定如何检查用户是否经过身份验证。我的情况如下,我需要查询一个外部API的get调用,对于我的开发过程,它如下:

getAdmin() {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.get('http://localhost:3000/admin/is_admin.json', options)
        .map(res => res)
        .catch(this.handleError)
}

此API调用返回true或false。我想知道使用这些信息的最佳选择是什么?我是否应该每次检查一个URL时调用以下函数?:

isAdmin() {
    this.getAdmin().subscribe(
        data => this.authenticationResult = data,
        error => console.log("Error: ", error),
        () => return JSON.parse(this.authenticationResult._data);
}

我无法启动并运行,因为在使用我给出的函数时,我的observable是未定义的。

2 个答案:

答案 0 :(得分:1)

“问题”是你的方法是异步的,所以你需要小心使用它的方式。

如果要在自定义activate的{​​{1}}方法中使用,则需要利用可观察性和反应式编程。

我不确切地知道您要检查管理员角色的方式:

RouterOutlet

为了优化请求,您可以懒惰(并且只能一次)调用请求以检查用户是否是管理员:

activate(instruction: ComponentInstruction) {
  return this.userService.getAdmin().flatMap((isAdmin) => {
    if (this.userService.isLoggIn()) {
      if (this._canActivate(instruction.urlPath, isAdmin) {
        return Observable.fromPromise(super.activate(instruction));
      } else {
        this.router.navigate(['Forbidden']);
        return Observable.throw('Forbidden');
      }
    } else {
      this.router.navigate(['Login']);
      return Observable.throw('Not authenticated');
    }
  }).toPromise();
}

_canActivate(url, admin) {
  return this.publicRoutes.indexOf(url) !== -1
    || this.userService.isLoggedIn();
}

另一种方法是在验证用户身份时加载此提示。这样,isAdmin:boolean; getAdmin() { if (this.isAdmin) { return Observable.of(this.isAdmin); } else { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.get('http://localhost:3000/admin/is_admin.json', options) .map(res => res) .catch(this.handleError); } } 方法的实现将更简单:

activate

答案 1 :(得分:0)

我会考虑以某种方式调用getAdmin()作为应用程序的第一步,将结果存储在一个SessionService对象中,该对象使用依赖注入进行移动。这样,只要您需要检查getAdmin的结果,就可以询问SessionService实例。 我希望这有帮助