身份验证 Auth0 后未加载模板 HTML

Question

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

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

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');
  };
}

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

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

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;
    }
}

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

@Component({
    selector: 'email-templates',
    templateUrl: './email-templates.component.html'
})
export class EmailTemplatesComponent implements OnInit {

    public isLoaded: Boolean = false;
    public barData:any;//barChart data
    private emailsArray: Array<any> = [];//table's data

    constructor(private router: Router, private toasterService: ToasterService,
        private elementRef: ElementRef, private emailService: EmailTemplateService,
        public modal: Modal, public overlay: Overlay, public vcRef: ViewContainerRef) {
         overlay.defaultViewContainer = vcRef;
    }

    ngOnInit() {
        this.getAllEmails();

    }

    getAllEmails() {
        this.emailService.getAllEmails().subscribe(res => {
            if(res.success=="true"){
            this.emailsArray = res.data;
           }
        })

    }
}

Answer 1

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

1. 您的服务器端需要身份验证才能提供静态文件，例如 Angular2 HTML 模板。
2. 您导航到电子邮件页面，由于缺乏适当的身份验证，模板请求失败。

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

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