Как заставить canActivate ждать загрузки магазина - PullRequest
Новая
       33

Как заставить canActivate ждать загрузки магазина

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

Я пытаюсь внедрить в свой проект сторож, который должен подождать, пока загрузка ngrx-store завершится, и после того, как эта проверка будет аутентифицирована пользователем или нет.Проблема в том, что охранник не ждет завершения загрузки магазина.

Мой app-routing.module.ts: 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {
  IsAuthGuard,
  HomeRedirectGuard
} from '@app/core';
import { LoginComponent } from './static';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'settings',
    loadChildren: 'app/features/settings/settings.module#SettingsModule',
    canActivate: [IsAuthGuard, HomeRedirectGuard]
  },
  {
    path: 'login',
    component: LoginComponent,
    data: { title: 'tts.menu.login' }
  },
 
  {
    path: 'home',
    loadChildren: 'app/features/home/home.module#HomeModule',
    data: { title: 'tts.menu.home' },
    canActivate: [IsAuthGuard, HomeRedirectGuard]
  }
  {
    path: '**',
    redirectTo: 'home'
  }
];

@NgModule({
  // useHash supports github.io demo page, remove in your app
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
      scrollPositionRestoration: 'enabled'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Идея IsAuthGuard заключается в том, чтобы просто проверить, есть ли у нас аутентификация или нет, и отправить запрос на вход в систему, если он не аутентифицирован.

IsAuthGuard: 

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlSegment, CanLoad, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { selectAuthisAuthenticated } from '@app/root-store/auth-store/selectors';
import { AuthStoreActions } from '@app/root-store';
import { take, switchMap } from 'rxjs/operators';

@Injectable()
export class IsAuthGuard implements CanActivate, CanLoad {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> {
    return this.canLoad(route.routeConfig, null);
  }

  constructor(private store: Store<any>, private router: Router) { }

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | boolean {
    console.log("CanLoad isAuth");

    return this.store
      .pipe(select(selectAuthisAuthenticated),
        take(1),
        switchMap(isAuth => {
          if (!isAuth) {
            this.store.dispatch(new AuthStoreActions.AutoLoginRequestAction());
          }
          return of(true);
        }));
  }
}

И, наконец, мой HomeRedirectGuard сервис, который не работает: 

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, Subject } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { selectAuthUser, selectAuthIsLoading} from '@app/root-store/auth-store/selectors';
import { Constants } from '../constants/constants.enum';
import { takeUntil, last, map } from 'rxjs/operators';

@Injectable()
export class HomeRedirectGuard implements CanActivate{
  isUser = false;
  private unsubscribe$: Subject<void> = new Subject<void>();

  constructor(private store: Store<any>, private router: Router) {
    this.store
      .pipe(select(selectAuthUser),
        takeUntil(this.unsubscribe$))
      .subscribe(user => {
        this.isUser = !!user;
        console.log("USER =", user);
      });
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> {    
    return this.checkAuth();
  }


  checkAuth(): Observable<boolean> | boolean {
    console.log("CanLoad Home");

     return  this.store.pipe(select(selectAuthIsLoading),
      last(val => val === false),
      map(isLoading => {
        console.log("isLoading = ", isLoading);
        console.log("isUser = ", this.isUser);
        let redirectUrl;

        if (this.isUser) {
          redirectUrl = Constants.HOME_URL;
        } else {
          redirectUrl = Constants.LOGIN_URL;
        }
        this.router.navigate([redirectUrl]);
        console.log("HOME redirectUrl=", redirectUrl);
        return true;
      })
    );
  }
}

И я вижу в консоли это: введите описание изображения здесь

CanLoad isAuth

действие [DEBUG]: [Auth] Запрос автоматического входа {payload: undefined, oldState: {…}, newState: auth: {isAuthenticated: false, user: null, redirectUrl: null, ошибка: null, isLoading: true }...

USER = null

CanLoad Home

Действие [DEBUG]: [Auth] Ошибка автоматического входа в систему {payload: undefined, oldState: {…}, newState: auth: {isAuthenticated: false, пользователь: null, redirectUrl: null, ошибка: null, isLoading: false }

Итак, я перехожу к HomeRedirectGuard, но Guard не ожидает последнего выпускавыберите, где isLoading имеет значение false и есть информация в хранилище, есть аутентификация или нет.

1 Ответ

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

Вы можете добавить skipWhile: 

this.store.pipe(select(selectAuthIsLoading),
skipWhile(loading => !loading),
...
...