auth0 with angular2 - 如何获得令牌

时间:2016-08-11 18:50:49

标签: angular auth0

我正在使用auth0并从here下载了快速入门示例应用。我正在尝试获取id_token,以便我可以获取用户的个人资料。但是,我无法,因为auth.service在我的其他页面加载后运行。

所以,我有一个像这样的home.component:

import { Component, OnInit } from '@angular/core';
import {Auth} from './auth.service';

@Component({
  selector: 'home',
  template: `
    <h1>Testing</h1>
    `,
  providers: [Auth],
})

export class HomeComponent implements OnInit {

 constructor(private auth: Auth) {}

 ngOnInit(){
     var token = localStorage.getItem('id_token');
     var profile = this.auth.lock.getProfile(token, function(error, profile) {
     if (error) {
       console.log("there was an ERROR" + error + token);
       return;
     }});    
   }
}

和我的auth.service类看起来像这样:

declare var Auth0Lock: any;

@Injectable()
export class Auth {
// Configure Auth0
lock = new Auth0Lock(mycreds, mycreds, {});

 constructor() {
    // Add callback for lock `authenticated` event
    this.lock.on("authenticated", (authResult) => {
    console.log("IN AUTH.SERVICE");      
    localStorage.setItem('id_token', authResult.idToken);                   
  });          
}

public login() {
  // Call the show method to display the widget.
  this.lock.show();        
};

public authenticated() {
// Check if there's an unexpired JWT
// This searches for an item in localStorage with key == 'id_token'

return tokenNotExpired();
};

  public logout() {
    // Remove token from localStorage
    localStorage.removeItem('id_token');
  };
}

问题是我的home.component类在我的auth.service之前加载,所以当我尝试获取用户令牌时,它还没有。我对角度很新,所以我不确定如何在另一页之前加载一页或如何解决这个问题。

1 个答案:

答案 0 :(得分:1)

在引发HomeComponents OnInit事件之前,实例化服务并构造函数运行。问题是,您的服务在设置令牌之前正在等待响应(auth)。

那就是说 - 你不能期望在HomeComponent上的init中有一个令牌。您没有获得令牌,直到用户通过Auth0Lock组件主动登录。您在HomeComponent中所能做的就是调用auth.login()。由于您回调的用户可能已经过身份验证,因此令牌可能就在那里 - 您可以在请求配置文件数据之前检查您的HomeComponent是否存在令牌(auth.authenticated())。

有几个问题要问你: 1.如果您收到错误,您是否检查过您的控制台? 你有没有得到&#34; IN AUTH.SERVICE&#34;来自您的身份验证回叫的消息?