Угловой маршрутизатор не работает, когда охранники возвращают наблюдаемый - PullRequest
Новая
       24

Угловой маршрутизатор не работает, когда охранники возвращают наблюдаемый

0 голосов
/ 05 февраля 2019

Я хочу перенаправить пользователей, которые не вошли в систему, когда они пытаются получить доступ к защищенным маршрутам, но перенаправление не работает, потому что функция, которая проверяет, вошел ли пользователь в систему, возвращает Observable.

Это мой кодв PrivateGuard: 

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AmplifyService } from 'aws-amplify-angular';

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

  constructor (private _router: Router,
               private _amplifyService: AmplifyService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this._amplifyService.authStateChange$.pipe(map(authState => {
        console.log(authState);
        if (authState.state === 'signedIn')  {
          return true;
        }else{
          this._router.navigate(['/login']); // Why Never redirect?
          return false;
        }
      })
    );
  }
}

app.routes.ts: 

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/public/login/login.component';
import { HomeComponent } from './components/private/home/home.component';

const APP_ROUTES: Routes = [
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [PrivateGuard] },
  { path: '**', pathMatch: 'full', redirectTo: 'home' }
];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

Если я записываю console.log в оператор else при входе в систему, этот console.log появляется в консоли, но никогда не перенаправляйте на homeComponent

Консоль, когда я пытаюсь перейти на частный маршрут

Маршрут в URL исчезает, вместо localhost: 4200 / login

Спасибо за любой ответ.

решено

Наконец, я использую обещание вместо наблюдаемого.Код следующий: 

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AmplifyService } from 'aws-amplify-angular';
import { Observable } from 'rxjs';

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

  constructor (private _router: Router,
               private _amplifyService: AmplifyService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this._amplifyService.auth().currentAuthenticatedUser()
      .then(() => {
        return true;
      })
      .catch(() => {
        this._router.navigate(['/login']);
        return false;
      });
  }
}

Спасибо всем за ответы

1 Ответ

0 голосов
/ 05 февраля 2019

Ваша наблюдаемая, вероятно, никогда не завершается, она все еще ждет, пока authStateChange $ выдаст больше значений.

Вы можете достичь того, что хотите, используя оператор take (который откажется от подписки после выдачи одного значения: 

return this._amplifyService.authStateChange$.pipe(
   take(1), // completes the observable on first emited value
   map(authState => /* */)
);
...