angular – 使用Auth0 spa快速入门时出错
发布时间:2020-12-17 17:51:47 所属栏目:安全 来源:网络整理
导读:我目前正在开发一个Angular 2 Web应用程序,它将使用Auth0进行用户身份验证. 我在Auth0网站上关注了quickstart,但是我收到错误无法在新的AuthService(auth.service.ts:9)中读取未定义的属性’WebAuth’,即使声明了AuthService. 我错过了什么吗?很感谢任何形
我目前正在开发一个Angular 2 Web应用程序,它将使用Auth0进行用户身份验证.
我在Auth0网站上关注了quickstart,但是我收到错误无法在新的AuthService(auth.service.ts:9)中读取未定义的属性’WebAuth’,即使声明了AuthService. 我错过了什么吗?很感谢任何形式的帮助. 这是我的代码 //app.component.ts import { Component } from '@angular/core'; import { AuthService } from '../../auth/auth.service'; @Component({ selector: 'app',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(public auth: AuthService) { auth.handleAuthentication(); } } //auth.service.ts import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import 'rxjs/add/operator/filter'; import auth0 from 'auth0-js'; @Injectable() export class AuthService { auth0 = new auth0.WebAuth({ clientID: '*****',domain: '*****',responseType: 'token id_token',audience: '******',redirectUri: 'http://localhost:4200/callback',scope: 'openid' }); constructor(public router: Router) { } public login(): void { this.auth0.authorize(); } public handleAuthentication(): void { this.auth0.parseHash((err,authResult) => { if (authResult && authResult.accessToken && authResult.idToken) { window.location.hash = ''; this.setSession(authResult); this.router.navigate(['/home']); } else if (err) { this.router.navigate(['/home']); console.log(err); } }); } private setSession(authResult): void { // Set the time that the access token will expire at const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime()); localStorage.setItem('access_token',authResult.accessToken); localStorage.setItem('id_token',authResult.idToken); localStorage.setItem('expires_at',expiresAt); } public logout(): void { // Remove tokens and expiry time from localStorage localStorage.removeItem('access_token'); localStorage.removeItem('id_token'); localStorage.removeItem('expires_at'); // Go back to the home route this.router.navigate(['/']); } public isAuthenticated(): boolean { // Check whether the current time is past the // access token's expiry time const expiresAt = JSON.parse(localStorage.getItem('expires_at')); if (new Date().getTime() < expiresAt) { return true; } else { return false; } } } //app.html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header" *ngIf="auth" > <a class="navbar-brand" href="#">Auth0 - Angular</a> <button class="btn btn-primary btn-margin" routerLink="/"> Home </button> <button class="btn btn-primary btn-margin" *ngIf="!auth.isAuthenticated()" (click)="auth.login()"> Log In </button> <button class="btn btn-primary btn-margin" *ngIf="auth.isAuthenticated()" (click)="auth.logout()"> Log Out </button> </div> </div> </nav> <main class="container"> <router-outlet></router-outlet> </main> 谢谢 解决方法
你试过这样导入它:
从’auth0-js’导入*为auth0; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |