Question

我正在尝试使用angular2应用程序中的auth0进行身份验证。 Bellow是我的身份验证服务（作为我使用的资源this和this以及this）：

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
declare var Auth0Lock: any;

@Injectable()
export class AuthenticationService{

    //Configure Auth0
    lock =  new Auth0Lock('my_client_id', 'my_domain', {});

    //Store profile object in auth class
    userProfile: Object;

    constructor(){
        this.lock.on("authenticated", (authResult)=>{
            localStorage.setItem('id_token', authResult.idToken);
            this.lock.getProfile(authResult.idToken, (error, profile) =>{
                if(error){
                    console.log(error);
                    return;
                }
                localStorage.setItem('profile', JSON.stringify(profile));
                this.userProfile =  profile;
            })
        });
    }

    public login(){
        console.log('Login');
        this.lock.show();
    }

    public isAuthenticated(){
        console.log(tokenNotExpired());
        return tokenNotExpired();
    }

    public logout(){
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');
        this.userProfile =  undefined;
    }
}

作为auth0身份提供者，我使用数据库。我设法使用Auth0锁定对象登录（我正在接收令牌），但是当我想隐藏/显示某些按钮时，即使在登录后，tokenNotExpired（）方法也始终返回false。

<button md-button (click)="login()" *ngIf="!authService.isAuthenticated()">
  <md-icon class="demo-toolbar-icon">input</md-icon>
  Login
</button>

<button md-button (click)="logout()" *ngIf="authService.isAuthenticated()">
  Logout
  <md-icon class="demo-toolbar-icon">exit_to_app</md-icon>
</button>

为什么tokenNotExpired方法总是返回false以及如何解决此问题以便我可以隐藏/显示元素？

修改

我将以下代码添加到身份验证服务中：

import { tokenNotExpired, AuthHttp, AuthConfig } from 'angular2-jwt';
declare var Auth0Lock: any;

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
        tokenName: 'id_token',
        tokenGetter: (() => localStorage.getItem('id_token'))
    }), http, options);
}

@NgModule({
  providers: [
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [Http, RequestOptions]
    }
  ]
})
@Injectable()
export class AuthenticationService{

//Configure Auth0
lock =  new Auth0Lock('my_client_id', 'my_domain', {});

Answer 1

假设您错过了tokenGetter或自定义令牌名称的配置，这里有一个如何配置它的示例。

有趣的部分是 tokenName 。我假设id_token是真正的令牌。

如果您需要其他逻辑来检索令牌，请取消注释tokenGetter并按您的需要实施。

import { NgModule } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import { AuthHttp, AuthConfig } from 'angular2-jwt';

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
        tokenName: 'id_token',
        //tokenGetter: (() => <whatEverStorage>.getItem('token')),
    }), http, options);
}

@NgModule({
  providers: [
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [Http, RequestOptions]
    }
  ]
})
export class AuthModule {}

Source

使用tokenNotExpired方法的auth0身份验证问题

1 个答案: