Шаблон HTML не загружается после аутентификации Auth0

Question

Я следую за образцом входа Auth0, указанным здесь https://github.com/auth0-samples/auth0-angularjs2-systemjs-sample/tree/master/01-Login.

Вот мой код служебной службы.

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. Сервер-сторона требует аутентификации для обслуживания статического файла вроде HTML-шаблоны Angular2.
2. Перейти к странице электронной почты и запрос шаблона не удается из-за отсутствия надлежащей аутентификации.

Если это так, вы можете подтвердить, просмотрев сетевую трассировку через инструменты разработчика браузера, вы должны разрешить получение шаблонов HTML без проверки подлинности.

Кроме того, использование setTimeout для сохранения идентификатора ID в хранилище в Интернете не является чем-то, что вы видите каждый день, поэтому вы можете объяснить свой прецедент с более подробной информацией.