Question

我正在尝试在我的项目中实施防护措施，该防护措施应等到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;
      })
    );
  }
}

我在控制台中看到以下内容： enter image description here

CanLoad isAuth

[DEBUG]操作：[Auth]自动登录请求{有效负载：未定义，oldState：{…}，newState： auth：{isAuthenticated：false，用户：null，redirectUrl：null，错误：null， isLoading：true } ...

USER = null

可以加载主页

[DEBUG]操作：[Auth]自动登录失败{有效载荷：未定义，oldState：{…}，newState： auth：{isAuthenticated：false，用户：null，redirectUrl：null，错误：null， isLoading：false }

所以，我来了HomeRedirectGuard，但是Guard并不等待上一次发出的select，其中isLoading为false且存储中有信息，是否有身份验证。

Answer 1

您可以添加一个skipWhile：

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

如何使canActivate等待商店加载

1 个答案: