使用angular-adal（ADAL）时，Angular应用程序无法在新选项卡中打开

Question

嗨，我正在使用Angular版本：5.2.0和“ adal-angular5”：“ ^ 1.0.36”。我面临的问题是导航到主页后登录后的问题，但是当我复制URL并粘贴到不同的Tab（相同的浏览器）中时，浏览器被挂起，并且在控制台中出现错误消息，如下图所示。请建议我这个问题的原因是什么。我的项目文件是：

  

login.component.ts

ngOnInit() {
    const returnUrl = this.activatedRoute.snapshot.queryParams['returnUrl'] || 'home';
    if (this.adalService.userInfo.authenticated) {
        this.router.navigate([returnUrl]);
    } else {
        this.adalService.login();
    }
}

  

authentication-guard.ts

从“ @ angular / core”导入{Injectable}；     从'@ angular / router'导入{Router，CanActivate，CanActivateChild，ActivatedRouteSnapshot，RouterStateSnapshot};     从“ adal-angular5”导入{Adal5Service};

@Injectable()
export class AuthenticationGuard implements CanActivate, CanActivateChild {
    constructor(private router: Router, private adalSvc: Adal5Service) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if (this.adalSvc.userInfo.authenticated) {
            return true;
        } else {
            this.router.navigate(['/home'], { queryParams: { returnUrl: state.url } });
            return false;
        }
    }

    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.canActivate(childRoute, state);
    }
}

  

auth-http-interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Adal5Service } from 'adal-angular5';
import { environment } from '../environments/environment';
import { LoaderService } from './services/loader.service';

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
    constructor(private adalService: Adal5Service, private loaderService: LoaderService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.loaderService.display(true);
        const jwt = this.adalService.userInfo.token;
        const authReq = req.clone({
            url: environment.apiUrl + req.url,
            headers: req.headers
                .set('Content-Type', 'application/json')
                .set('Authorization', 'Bearer ' + jwt)
        });
        return next.handle(authReq).finally(() => this.loaderService.display(false));
    }
}

  

app-routing.module.ts

const routes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
{
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthenticationGuard],
        canActivateChild: [AuthenticationGuard]
    },
{
        path: 'employees',
        component: EmployeeIndexComponent,
        canActivate: [AuthenticationGuard],
        canActivateChild: [AuthenticationGuard]
    }
...
...
...