Angular 2 AuthGuard выбрасывает меня всякий раз, когда я делаю http запрос на получение - PullRequest
Новая
       36

Angular 2 AuthGuard выбрасывает меня всякий раз, когда я делаю http запрос на получение

0 голосов
/ 03 марта 2020

У меня есть одно 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;
    }
}

И в app-routing я настроил свои маршруты 

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, у меня появляется форма, и при отправке этой формы я делаю запрос http на git. Это мой 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);
      }
        )
    }

Так что, когда я нажимаю на кнопку отправки, меня перенаправляют на страницу входа , Пожалуйста, помогите мне, где я делаю неправильно. Заранее спасибо.

Редактировать: Я думаю, что нашел проблему, так что это мой перехватчик, который добавляет дополнительную авторизацию к вызову API пользователя github. 

@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.

...