Angular Ngrx 重定向内部效果导致奇怪的错误

Question

在尝试重定向登录成功后，我收到一个非常奇怪的错误。基本上，这是我的流程：

1. 用户填写登录表单，然后调度“登录”操作。
2. 登录效果调用AuthService，它负责用Firebase进行登录
3. 如果 Firebase 登录成功，则会调度一个新操作：loginSuccess
4. LoginSuccess 效果应该调用我的后端（“查询我”），以便获取用户的个人资料信息
5. 调用后，效果dispatch UserLoaded action（用于reducer更新状态），然后重定向到首页

我正在使用 Apollo GraphQL 与我的后端进行通信；如果我不使用 router.navigate，一切都会正常工作。但是当我使用它时，我收到这个错误，这对我来说没有任何意义：

ERROR Error: Uncaught (in promise): TypeError: Cannot add property 0, object is not extensible
TypeError: Cannot add property 0, object is not extensible

这是负责的代码：

loginSuccess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AuthLoginActions.loginSuccess),
      switchMap(({ credentials }) =>
        this.authService.me().pipe(
          map((user: MeQuery['me']) => AuthActions.userLoaded({ user })),
          catchError((error) => {
            return of(AuthActions.error({ error }));
          })
        )
      ),
      tap(() => this.router.navigate(['/']))
    )
  );

这是 AuthService me() :

me(): Observable<MeQuery['me']> {
    return this.meGql.watch().valueChanges.pipe(
      map((result) => {
        console.log('result:');
        console.log(result);

        return result.data.me;
      })
    );
  }

我发现当您尝试修改不可变对象时可能会发生这些错误，但这里情况并非如此。确实，当我删除水龙头内的路由器导航时，不再出现错误。 我想知道这是否可能是 AuthActions.userLoaded 调度时间和路由器导航之间的计时问题。

我还尝试对 userLoaded 操作进行效果导航，但没有取得更多成功。

编辑：如果我删除用户路线上的守卫，它就会起作用。所以这里有更多来自路线和相关守卫的代码（使用角度/火）：

app.routes.ts

export const appRoutes: Route[] = [
  {
    path: 'auth',
    loadChildren: () =>
      import('@booking/booking-frontend-auth-feature-shell').then(
        (m) => m.bookingFrontendAuthFeatureShellRoutes
      ),
  },

  {
    path: '',
    loadChildren: userSpaceRoutes,
    ...canActivate(userSpaceGuard),
  },
];

app.guards.ts

export const userSpaceGuard = () =>
  pipe(
    switchMap(async (user: User | null) => {
      console.log('switchMap');

      if (!user) {
        console.log('no user');
        return null;
      }

      console.log('return transformed user');
      // Transform user to get idTokenResult
      return {
        user: user,
        idTokenResult: await user.getIdTokenResult(),
      };
    }),
    map((userInfos: any) => {
      console.log('userInfos: ');
      console.log(userInfos);
      // No user, redirect to login
      if (!userInfos?.user) {
        console.log('no user');
        return [`auth/login`];
      }

      // If user is admin, redirect to admin space
      const claims = userInfos.idTokenResult.claims;
      console.log('claims:');
      console.log(claims);
      if (claims && claims.role === UserRole.Admin) {
        console.log('return admin');
        return ['admin'];
      }

      console.log('return true');
      return true;
    })
  );

有什么想法吗？

谢谢

Answer 1

我终于自己找到了答案，投入了更多：是 Firebase Auth 导致了这个问题。 事实上，在登录成功时，我将 UserCredentials（来自 Firebase）存储在我的商店中。看起来 Firebase 正在尝试在某个时间更新这些凭据，从而导致此不变性错误。

我意识到我的商店中不需要这些凭据，所以我只是删除了它们，现在一切正常。