0

我有一个 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>

在 .ts 中，我正在调用 git

onSubmit(){
    console.log(this.model.sourceName);
    if(this.model.sourceName == 'GIT'){
      this.http.get('https://api.github.com/users/'+this.model.userName)
      .subscribe ((response) => {
        this.response = response;
        console.log(this.response);
      }
        )
    }

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

编辑：我想我发现了这个问题，所以这是我的拦截器，它正在为 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);
    }

对我来说，我只想让拦截器跳过https://api.github.com/users/调用，它不应该向它添加任何授权，所以请你帮我跳过任何特定的 url。

4

0 回答 0