Angular AuthGuard - NgRx - 重新加载重定向通用

编程问答 2022-06-02

问题描述

问题出在 Angular Universal，如果我在没有 Universal 的情况下构建应用程序它工作正常，但使用 Angular Universal 这就是问题所在。

我在 ngrx 和 Angular Universal 中使用 angular，在每次重新加载时，我都会向后端发送请求，然后检索用户数据。如果路由在重新加载时受到身份验证保护保护，如果用户首先登录，它会重定向到 /login，然后在 0.5 秒后重定向到受保护的路由，数据已加载，一切正常，但为什么它首先显示 /login ？

授权保护

  canActivate(
    route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

      return this.store.select(fromAuth.selectAuthState).pipe(
        map(authState => authState.isInitializing),filter((isInit) => !isInit),tap((data) => console.log(data)),switchMap(() => {
          return this.store.select(fromAuth.selectAuthState).pipe(
            map(authState => authState),map((isAuth) => {
              console.log(isAuth);
              if (isAuth.user) return true;
              return this.router.createUrlTree(['/login'],{ queryParams: { returnUrl: state.url } });
            }),take(1)
            );
        })
      );

Ngrx/store 中的初始状态

export const initialState: State = {
  isAuthenticated: false,isInitializing: true

登录成功和登录失败 isInitializing 设置为 false

  on(AuthActions.logInSuccess,(state) => {
    return {
      isInitializing: false,isAuthenticated: true,};
  }),

我正在 APP_INITIALIZER 中调度 isLoggedIn 操作

export function appInitializerFactory(
  store: Store<any>
) {
  return () => {
          store.dispatch(AuthActions.isLoggedIn());
  };
}

  providers: [
    {
      provide: APP_INITIALIZER,useFactory: appInitializerFactory,deps: [Store],multi: true
  }
  ]

内部验证效果

  isLoggedIn$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AuthActions.isLoggedIn),switchMap(() => {
        return this.authService.isLoggedIn().pipe(
          switchMap((user: any) => {
            return [
              AuthActions.logInSuccess({ token: user.token,name: user.data.user.name,email: user.data.user.email,id: user.data.user._id,likedProperties: [...user.data.user.likedPropertiesSell,...user.data.user.likedPropertiesRent],myProfileinformations: userProfile })]
          }),catchError(err => {
            return of(AuthActions.logInFail({ error: `code ${err.status}` }))
          }
          )
        );
      })
    )
  );

来自 Auth Guard 的控制台日志

2020-12-24T14:01:53.070535+00:00 app[web.1]:   isAuthenticated: false,2020-12-24T14:01:53.070535+00:00 app[web.1]:   user: null,2020-12-24T14:01:53.070536+00:00 app[web.1]:   errorMessage: 'code undefined',2020-12-24T14:01:53.070537+00:00 app[web.1]:   likedProperties: null,2020-12-24T14:01:53.070537+00:00 app[web.1]:   following: null,2020-12-24T14:01:53.070538+00:00 app[web.1]:   followingListLoaded: false,2020-12-24T14:01:53.070538+00:00 app[web.1]:   myProfileinformations: null,2020-12-24T14:01:53.070539+00:00 app[web.1]:   isInitializing: false
2020-12-24T14:01:53.070539+00:00 app[web.1]: }

所以 store 在检索用户数据之前将 isInitializing 设置为 false，我真的不知道为什么 errorMessage 存在那里，在 redux store logInFail() 永远不会被调度

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular-universalauth-guardngrxreduxreduxredux