Question

我遵循此处https://github.com/auth0-samples/auth0-angularjs2-systemjs-sample/tree/master/01-Login给出的Auth0登录示例。

这是我的身份验证服务代码。

get

成功路由后，我会导航到我的电子邮件页面。电子邮件组件已加载。它的构造函数和onInit方法被成功调用。但是html没有显示出来。

这是我的身份验证保护代码。用户没有被路由到登录页面，所以很好。

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { myConfig } from '../auth0.config';
import { Router } from '@angular/router'


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

@Injectable()
export class Auth {
  // Configure Auth0
  lock = new Auth0Lock(myConfig.ClientID,myConfig.DomainName, {
     auth: {
       redirectUrl: 'http://localhost:4200/server-auth',
       responseType: 'token',
       params: {
         state: 'mologin'
       }
     }
  });

  constructor(private router: Router) {
    // Add callback for lock `authenticated` event
    this.lock.on('authenticated', (authResult) => {
      localStorage.setItem('id_token', authResult.idToken);
      this.router.navigate(['/emails'])
    });

  }

  public login() {
    // Call the show method to display the widget.
    this.lock.show();
  };

  public authenticated() {
    // Check if there's an unexpired JWT
    // It searches for an item in localStorage with key == 'id_token'
    return tokenNotExpired();
  };

  public logout() {
    // Remove token from localStorage
    localStorage.removeItem('id_token');
  };
}

这是成功导航后加载的电子邮件组件。

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import { Auth } from '../../services';
import { Router } from '@angular/router';
import { Injectable} from '@angular/core';

@Injectable()
export class AuthenticationGuard implements CanActivate {

    constructor(private authService: Auth, private router: Router) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        let url = route.url[0];
        if (!this.authService.authenticated()) {
            this.router.navigate(['login']);
        }
        return true;
    }
}

Answer 1

根据您提供的信息，很难为您提供明确的答案，但可能会发生以下情况：

您的服务器端要求对Angular2 HTML模板等静态文件进行身份验证。
您导航到电子邮件页面，由于缺乏正确的身份验证，模板请求失败。

如果是这种情况，您可以通过浏览器开发人员工具查看网络跟踪来确认，您需要允许获取HTML模板而无需身份验证。

此外，使用setTimeout在Web存储中保存ID令牌并不是您每天都能看到的内容，因此您可能需要了解一些更详细的用例。

验证Auth0后未加载模板HTML

1 个答案: