Angular 4在回调时出现Auth0-js错误

时间:2017-06-20 00:18:38

标签: angular single-page-application auth0

我仍在学习这些技术,但在他们的文档和论坛中没有发现与此奇怪错误相关的内容。我正在使用Angular 4,我想使用Auth0作为我的身份验证和授权服务。到目前为止,我得到了这个。

auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import * as auth0 from 'auth0-js';

@Injectable()
export class AuthService {

  auth0 = new auth0.WebAuth({
    clientID: '5Rbzn2n568eZFWgAeZCB5zwox7ZI6Jgm',
    domain: 'credishop.auth0.com',
    responseType: 'token id_token',
    audience: 'https://credishop.auth0.com/userinfo',
    redirectUri: 'http://localhost:5000',      
    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(['http://localhost:5000/#/app/dashboard']);
      } else if (err) {
        this.router.navigate(['/error']);
        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'));
    return new Date().getTime() < expiresAt;
  }

}

dashboard.component.ts

import { AuthService } from './../services/auth.service';
import { Component } from '@angular/core';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.template.html'
})
export class Dashboard {

  constructor(public auth: AuthService) {
    auth.handleAuthentication();
  }

}

这个模块太大了,不能在这里发布,不会创建一个无用的繁琐帖子,但它确实将服务注册为提供者。

到目前为止,我已经到了这一点,我有登录和注销按钮,它按预期显示登录按钮, AFTER 我点击登录按钮,它将我重定向到Auth0托管登录页面,我登录并在Auth0控制面板内的日志中看到我成功登录。 但是,当它将我重定向到我的网站时,它应该将我重定向到我的回调页面 http://localhost:5000 ,而不是它会引发我404页面不存在,因为它尝试转到我的代码中未设置的 http://localhost:5000/#/access_token

我一直试图调试这个2天现在无济于事,我想知道这里有没有人知道发生了什么,我应该从哪里开始寻求解决这个问题。

提前谢谢。

0 个答案:

没有答案