用Angular 2登錄到Auth0

我是following a tutorial用於在Angular 2中登錄到Auth0。這裏有一些困難，因爲我使用的是A2 CLI，他不是，這意味着我們的代碼不一定會相同。這無疑是我的問題的原因。用Angular 2登錄到Auth0

不過，我希望能夠在使用CLI時學習這個概念。

無論如何，這裏的問題是，當我使用Auth-0登錄時，頁面應該顯示Log Out鏈接。它不是。仍然顯示Log In，而Log Out仍然隱藏。

此外，當我登錄時，沒有console.log消息，也沒有任何東西存儲在我的localStorage中。因此，讓我懷疑我是否真的登錄過。但是，我的Auth0小部件確認我已經登錄。我的Auth-0儀表板也證實了這一點。

我沒有收到任何錯誤消息。

app.component.html

<ul> 
    <li [class.active]="isActive('')"><a [routerLink]="['Home']">Home</a></li> 
    <li [class.active]="isActive('/about')"><a [routerLink]="['About']">About</a></li> 
</ul> 

<ul> 
    <li><a href="#" *ngIf="!loggedIn()" (click)="login()">Log In</a></li> 
    <li><a href="#" *ngIf="loggedIn()" (click)="logout()">Log Out</a></li> 
</ul> 
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core'; 
import { Location } from '@angular/common'; 
import { tokenNotExpired, JwtHelper } from 'angular2-jwt'; 

declare var Auth0Lock; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
lock = new Auth0Lock('mike lient id', 'my dome main'); 
jwtHelper = new JwtHelper(); 
location: Location; 
constructor(location: Location){this.location = location;} 

login(){ 
var self = this; 
this.lock.show((err: string, profile: string, id_token: string) => { 
    if (err) {throw new Error(err);} 
    localStorage.setItem('profile', JSON.stringify(profile)); 
    localStorage.setItem('id_token', id_token); 
    console.log(
    this.jwtHelper.decodeToken(id_token), 
    this.jwtHelper.getTokenExpirationDate(id_token), 
    this.jwtHelper.isTokenExpired(id_token) 
    ); 
self.loggedIn();  
}); 
} 
logout(){ 
    localStorage.removeItem('profile'); 
    localStorage.removeItem('id_token'); 
    this.loggedIn(); 
} 
loggedIn(){return tokenNotExpired();} 
isActive(path) {return this.location.path() === path;} 
}

要確保我已經提供了所有必要的信息，我也包括我的應用程序.module。

app.module

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { routing, appRoutingProviders } from './app.routes'; 

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { AboutComponent } from './about/about.component'; 
import { NavigationComponent } from './navigation/navigation.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    AboutComponent, 
    NavigationComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing 
    ], 
    providers: [appRoutingProviders], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

來源

2016-09-23 abrahamlinkedin

我假設this.lock.show是一個訂閱。

這裏有兩個問題：你的this.lock.show函數沒有錯誤回調，而調用self.loggedIn()什麼都不做，它只是返回一個布爾值。如果你想設置它，你將不得不做其他事情。

login(){ 
    var self = this; 
    this.lock.show((err: string, profile: string, id_token: string) => { 
     if (err) {throw new Error(err);} 
     localStorage.setItem('profile', JSON.stringify(profile)); 
     localStorage.setItem('id_token', id_token); 
     console.log(
      this.jwtHelper.decodeToken(id_token), 
      this.jwtHelper.getTokenExpirationDate(id_token), 
      this.jwtHelper.isTokenExpired(id_token) 
      ); 
     self.loggedIn(); // returns true/false but doesn't set anything! 
    }, (error) => console.log(error) // I think you need this 
    ); 
}

即使你有if (err) {throw new Error(err);}線，如果整個this.lock.show功能錯誤，那麼我認爲它會調用error回調函數，而不是success回調，你有。

來源

2016-09-24 13:42:34

用Angular 2登錄到Auth0

回答

相關問題