angular - Ionic 4 - AuthGuard 页面路由权限延迟

Question

我有一个 ionic 4 应用程序，它本地存储有关用户的信息。当用户打开应用程序时，如果他的信息在那里，那么我希望将他发送到主页。如果他不是，那么我希望他被路由到登录页面，这很正常。

我遇到的问题是，在大约 500 毫秒的时间内，您会看到登录页面，然后在阅读信息后，然后 会将您重定向到主页。

我希望应用程序等待在存储响应之前它会将您定向到登录页面或主页。

应用程序组件.ts

  public initializeApp(): void {
    this.platform.ready().then((): void => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.authService.authState.subscribe((state: boolean): void => {
        if (state) {
          this.router.navigate(['home']);
        } else {
          this.router.navigate(['login-register']);
        }
      });
      this.permissionService.requestCameraPermission();
    });
  }

AuthService.service.ts

public readonly authState: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false)

  private _ifLoggedIn(): void {
    // just sees if his info is saved, if so then he has been logged in
    this.userService.getUserInfo().then((response: UserData): void => {
      if (response) {
        this.authState.next(true);
      }
    });
  }

  public isAuthenticated(): boolean {
    return this.authState.value;
  }

授权 guard

export class AuthGuardService {
  private authService: AuthService;

  public constructor(authService: AuthService) {
    this.authService = authService;
  }
  public canActivate(): boolean {
    return this.authService.isAuthenticated();
  }
}

应用程序路由.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login-register',
    pathMatch: 'full',
  },
  {
    path: 'login-register',
    loadChildren: () => import('../pages/login-register/login-register.module').then(m => m.LoginRegisterPageModule),
  },
  {
    path: 'home',
    loadChildren: () => import('../pages/home/home.module').then(m => m.HomePageModule),
    canActivate: [AuthGuardService],
  },
];

如果您需要任何其他信息，请告诉我。谢谢大家!

Answer 1

您遇到的第一个问题是 BehaviorSubject 已初始化，因此当您请求结果时它会直接返回结果。

第二个问题是 isAuthenticated() 会返回值，因为它是同步方法，但你需要任何调用它的人等待。

解决方案是使用 ReplySubject 并使 isAuthenticated() 异步。

AuthService.service.ts

public readonly authState: ReplaySubject<boolean> = new ReplaySubject<boolean>(1)

  private _ifLoggedIn(): void {
    // just sees if his info is saved, if so then he has been logged in
    this.userService.getUserInfo().then((response: UserData): void => {
        this.authState.next(!!response);
    }, (reason) => this.authState.next(false));
  }

  public async isAuthenticated(): Promise<boolean> {
    return this.authState.asObservable().pipe(take(1)).toPromise();
  }

注意this.authState.next(false)是返回一个结果，并不是一直卡在等待中，所以如果返回401之类的错误，会认为没有登录。

this.authState.next(!!response) 只是您之前条件的缩写格式，如果响应返回 null 或 将处理这种情况>undefined 如果你实现你的 .getUserInfo() 这样用户就没有登录。

AuthGuard

export class AuthGuardService implements CanActivate {
  private authService: AuthService;

  public constructor(authService: AuthService) {
    this.authService = authService;
  }
  public async canActivate(): Promise<boolean> {
    return this.authService.isAuthenticated();
  }
}

请注意，canActivate() 已经支持异步实现，另外，我添加了 implements CanActivate，因此它确实更有意义。

您可以在此处了解有关 Subject 类型的更多信息:Understanding rxjs BehaviorSubject, ReplaySubject and AsyncSubject