每当我发出http get请求时，Angular 2 AuthGuard就会将我抛出

我有一个angular应用程序，一个我在angular 6中构建的简单仪表板。现在我尝试添加登录和身份验证，因此为此我创建了一个AuthGuard

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

@Injectable()
export class RouteGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

应用内路由我已经配置了我的路由

const routes: Routes = [
    {path: '', redirectTo: '/home', pathMatch: 'full'},
    {path:'home', component: MatBoardComponent, canActivate: [RouteGuard] },
    {path:'http', component: HttpCallComponent, canActivate: [RouteGuard] },
    {path: 'login', component: LoginComponent},
    {path:'**', component: PageNotFoundComponent}
];

因此，当我没有登录RouteGuard时，每当我点击任何链接时，它都会将我重定向回登录，但成功登录后，我就可以访问该页面。 我面临的问题是，每当我点击http链接时，我就有一个表单，在提交该表单时，我向git发出http请求。这是我的HttpCallComponent的html

<div class="grid-container">
<form #SimpleForm="ngForm">
  <div class="form-group">
      <label for="userName">User Name: </label>
      <input type="text" class="form-control" id="userName" required [(ngModel)] = "model.userName" 
      name="userName" #userName="ngModel">
      <div [hidden] ="userName.valid || userName.pristine" class="alert alert-danger">
          User name is required
      </div>
  </div>

  <div class="form-group">
      <label for="sourceName">Source: </label>
      <select class="form-control" id="sourceName" [(ngModel)] = "model.sourceName" name="courseName">
          <option *ngFor="let course of sourceName" [value]="course">{{course}}</option>
      </select>
  </div> 
</form>

<button class="btn btn-success" [disabled]="!SimpleForm.form.valid" (click)="onSubmit()">Submit Form</button>
</div>
<div *ngIf="response" [@fadeInOut]>
    <p>Login Name: {{response.login}}</p>
    <p>Followers: {{response.followers}}</p>
    <p>Public Repos: {{response.public_repos}}</p>
    <p>Avatar:</p>
    <img src={{response.avatar_url}} style="max-height: 150px">
</div>

所以当我点击提交时，我被重定向到登录页面。请在我做错的地方帮助我。 提前谢谢

编辑：我想我发现了问题所在，因此这是我的拦截器，它正在向github用户api调用添加额外授权

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: { 
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
        }

        return next.handle(request);
    }

@Injectable（）
导出类JwtInterceptor实现HttpInterceptor{
拦截（请求：HttpRequest调用，它不应向其添加任何授权，因此请您帮助我跳过任何特定url。
我不明白这是AuthGuard问题的原因。您在哪里执行导航？您是否正在运行http侦听器？@AndrewAllen不，我没有任何侦听器运行。所以早些时候，我没有使用AuthGuardhttp调用正常工作，没有任何问题。我有这个问题，因为我添加了AuthGuard。@KurtHamilton我只是单击表单并提交2个字段（用户名和源，即GIT）我使用它从GIT发出http get调用，并使用response对象在UI上显示该结果。我的http调用只是从GIT获取通过UI输入的用户的详细信息。您可以在stackblitz中重新创建问题，还是显示更多相关代码
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: { 
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
        }

        return next.handle(request);
    }