Auth0 angular 7 цикл перенаправления входа в систему - PullRequest
Новая
       11

Auth0 angular 7 цикл перенаправления входа в систему

2 голосов
/ 28 мая 2020

Я использую auth0 для настройки моего приложения angular 7 с auth. Я следовал руководству по быстрому запуску, чтобы приступить к работе. Единственное, что я добавил в дополнение к файлу auth.service.ts: 

  getTokenSilently$(options?): Observable<string> {
    return this.auth0Client$.pipe(
      concatMap((client: Auth0Client) => from(client.getTokenSilently(options)))
    );
  }

для поддержки HTTP-перехватчика: 

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { AuthService } from './auth.service';
import { Observable, throwError } from 'rxjs';
import { mergeMap, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {

  constructor(private auth: AuthService) { }

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return this.auth.getTokenSilently$().pipe(
      mergeMap(token => {
        const tokenReq = req.clone({
          setHeaders: { Authorization: `Bearer ${token}` }
        });
        return next.handle(tokenReq);
      }),
      catchError(err => throwError(err))
    )
  }
}

Другое, что я сделал иначе, это то, что мой приложение не имеет кнопки входа в систему, когда приложение запускается, оно пытается go перейти на домашнюю страницу с защитой авторизации: 

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean|UrlTree> | boolean {
    return this.auth.isAuthenticated$.pipe(
      tap(loggedIn => {
        if (!loggedIn) {
          this.auth.login(state.url);
        }
      })
    );
  }

}

, поэтому оно автоматически вызывает логин, чтобы пользователь перенаправлялся на auth0. Как только они вводят свои кредиты, он перенаправляет их обратно на главную страницу. Затем внезапно служба auth.service.ts загружается снова, и снова запускается защита аутентификации, и она снова запускает функцию входа в систему. Кажется, это просто продолжается.

Есть идеи, почему он продолжает зацикливаться?

1 Ответ

1 голос
/ 30 августа 2020

Замените ваш метод Guard следующим: 

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> | Promise<boolean | UrlTree> | boolean {
        return this.auth.isAuthenticated$.pipe(
            delay(1000),
            tap(loggedIn => {
                if (!loggedIn) {
                    this.auth.login(state.url);
                }
            })
        );
    }

Проблема заключалась в том, что loggedIn все еще находится на false, даже после успешного входа в систему. Я понимаю, что это не чистое или красивое решение. Я скромно думаю, что образец Auth0 Angular нуждается в некоторых исправлениях.

...