Angular 2 – Auth0

我正在尝试执行login并从Auth0注册。 我从Auth0网站按照以下步骤操作：

https://auth0.com/docs/quickstart/spa/angular2/01-login

我正在使用Angular 2 RC5

这是我的文件是这样的：

app.component.html

<div class="navbar-header"> <a class="navbar-brand" href="#">Auth0 - Angular 2</a> <button class="btn btn-primary btn-margin" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</button> <button class="btn btn-primary btn-margin" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</button> </div> 

app.component.ts

从'@ angular / core'导入{Component}; 从“./auth.service”导入{Auth};

 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { constructor(private auth: Auth) {} } 

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

但我在我的Chrome开发者JavaScript控制台中得到这些错误：

 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 ORIGINAL EXCEPTION: No provider for Auth! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (exceptions.js:27) at NoProviderError.AbstractProviderError [as constructor] (reflective_exceptions.js:43) at new NoProviderError (reflective_exceptions.js:80) at ReflectiveInjector_._throwOrNull (reflective_injector.js:786) at ReflectiveInjector_._getByKeyDefault (reflective_injector.js:814) at ReflectiveInjector_._getByKey (reflective_injector.js:777) at ReflectiveInjector_.get (reflective_injector.js:586) at NgModuleInjector.get (ng_module_factory.js:98) at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent.ngfactory.js:16) at DebugAppView.AppView.create (view.js:101) ERROR CONTEXT: DebugContext {_view: _View_AppComponent_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}_nodeIndex: 0_staticNodeInfo: (...)_tplCol: 0_tplRow: 0_view: _View_AppComponent_Host0component: (...)componentRenderElement: (...)context: (...)injector: (...)providerTokens: (...)references: (...)renderNode: (...)source: (...)__proto__: Object Unhandled Promise rejection: EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 ORIGINAL EXCEPTION: No provider for Auth! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:4200/main.bundle.js:1867:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/main.bundle.js:29230:16) at new NoProviderError (http://localhost:4200/main.bundle.js:29267:16) at ReflectiveInjector_._throwOrNull (http://localhost:4200/main.bundle.js:58584:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/main.bundle.js:58612:25) at ReflectiveInjector_._getByKey (http://localhost:4200/main.bundle.js:58575:25) at ReflectiveInjector_.get (http://localhost:4200/main.bundle.js:58384:21) at NgModuleInjector.get (http://localhost:4200/main.bundle.js:42059:52) at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent.ngfactory.js:16:70) at DebugAppView.AppView.create (http://localhost:4200/main.bundle.js:59148:21) ERROR CONTEXT: [object Object] ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedException {_wrapperMessage: "Error in ./AppComponent class AppComponent_Host - inline template:0:0", _originalException: NoProviderError, _originalStack: "Error: DI Exception↵ at NoProviderError.BaseExc…e (http://localhost:4200/main.bundle.js:59148:21)", _context: DebugContext, _wrapperStack: "Error: Error in ./AppComponent class AppComponent_… at http://localhost:4200/main.bundle.js:27889:27"} Error: Uncaught (in promise): EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0(…) 

该网页是空白的。 没有出现。

任何帮助将不胜感激。

干杯，

Answer 1

这是我如何实现，它工作得很好Code Geek

app.module.ts

  import { AUTH_PROVIDERS } from 'angular2-jwt'; import { Auth } from './services/auth0.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [AUTH_PROVIDERS, Auth], bootstrap: [AppComponent] }) export class AppModule { } 

的index.html

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Angular2Auth0</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script> </head> <body> <app-root>Loading...</app-root> </body> </html> 

app.component.ts

 import { Component } from '@angular/core'; import { Auth } from './services/auth0.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private auth: Auth) { console.log(auth); } } 

Answer 2

这对我工作：

`@ angular / core'的import {Injectable}; 从'@ angular / router'导入{Router，CanActivate，ActivatedRouteSnapshot，RouterStateSnapshot};

@Injectable（）导出类AuthGuard实现CanActivate {

 constructor(private router: Router) { } public canActivate(route: ActivatedRouteSnapshot, state: `enter code here`RouterStateSnapshot) { if (localStorage.getItem('userId')) { return true; } // not logged in so redirect to login page with the return url this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } }); return false; } 

}`

在路由器中使用这个： export const ROUTES: Routes = [ { path: '', component: YourComponent, canActivate: [AuthGuard]} ];

并在login设置本地存储： localStorage.setItem('userId', id);

Answer 3

在组件元数据中，添加： –

 providers: [Auth] 

使用服务

要么 ：-

将其包含在你的ngModule元数据中：

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {Auth} from 'your path' @NgModule({ imports: [ //your imports ], bootstrap: [//your component], providers: [Auth] 

}）

请参阅这里

Answer 4

这些步骤没有提到，但是您需要在index.html中添加以下脚本。

  <script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script> 

当我做这个网站开始加载，现在我得到了一个不同的错误。

core.umd.js？e2a5：3462 EXCEPTION：./AppComponent类中的错误AppComponent – 内联模板：4：70由以下原因造成：无法读取未authentication的属性'authenticated'

如果我能解决这个问题，我会保持你的发言。