Angular-cli Auth0登錄配置

Question

我想將angular2-jwt模塊添加到我的angular項目中，但是我不知道我需要在哪個文件中添加節點模塊映射（我正在使用1.0.0-beta.28.3 angular-cli版本），實際上我想要做添加auth0基於單點登錄和基於令牌的身份驗證，它給了我警告，瀏覽器上沒有任何顯示

 ./src/app/Auth.service.ts There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\node_modules\\@ngtools\\webpack\\src\\index.js!C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\src\\app\\Auth.service.ts Used by 1 module(s), ie C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\node_modules\\@ngtools\\webpack\\src\\index.js!C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\src\\app\\app.component.ts * C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\node_modules\\@ngtools\\webpack\\src\\index.js!C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\src\\app\\auth.service.ts Used by 3 module(s), ie C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\node_modules\\@ngtools\\webpack\\src\\index.js!C:\\Users\\Wassim\\angular workspace\\gestionDocuments\\src\\app\\app.module.ts 

瀏覽器給我這個例外

EXCEPTION: No provider for Auth!

這是auth.service.ts

    // app/auth.service.ts

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class Auth {
  // Configure Auth0
  lock = new Auth0Lock('y1LTKr8nqe45mF7MRVLiIU7r3GBApRfn', 'wess.auth0.com', {});

  constructor() {
    // Add callback for lock `authenticated` event
    this.lock.on("authenticated", (authResult:any) => {
      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');
  }
}

這是app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http, RequestOptions} from '@angular/http';
import {routing} from "./app.routing";

import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import {Auth} from './auth.service';

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp( new AuthConfig({}), http, options);
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,


  ],
  providers: [
{
    provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [ Http, RequestOptions ]
},
Auth
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

首先，您需要修復以下錯誤：

There are multiple modules with names that only differ in casing.

這意味着您必須重命名文件auth.service.ts和Auth.service.ts。 之后，您可以開始調試auth和angular-jwt所面臨的挑戰。

Answer 2

注意：如何創建服務並正確命名。

如果將服務文件命名為“ myservice.service.ts”，則導出的類應為：“ Myservice”。

來自文檔

服務文件的命名約定是小寫的服務名稱，后跟.service。 對於多字服務名稱，請使用小寫破折號。 例如，SpecialSuperHeroService的文件名是special-super-hero.service.ts

我的建議是使用angular-cli創建服務。 您不必擔心命名的情況。

ng generate service auth

也可以做

ng g service auth

此命令將創建名為auth.service的新服務。