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; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
