由于 Angular 17 中的守卫重定向而导致闪烁问题

Question

我在使用服务器端渲染 (SSR) 的 Angular 17 应用程序中遇到一个问题，在重新加载页面时，登录页面会短暂出现然后消失。这种行为不应该发生，我正在努力找出根本原因。

我的身份验证防护设置如下：

export const authGuard = (): CanActivateFn => {
  return route => {
    const auth = inject(AuthService);
    const router = inject(Router);

    if (!auth.session()) {
      const queryParams = { redirect: route.url };

      return router.createUrlTree(['login'], { queryParams });
    }

    return true;
  };
};

有趣的是，如果我将守卫更改为 return false 而不是使用 router.createUrlTree(['login'], { queryParams }) 重定向，问题就解决了，但显然，我想在身份验证时将用户重定向到登录页面必填。

是否有人在使用 Angular 17 和 SSR 时遇到过类似的问题，或者可以提供有关如何排查和解决此问题的指导？

供您参考，我使用 Supabase 管理身份验证，并且实例化了 auth.session()。”

function initializeSessionFactory(auth: AuthService) {
  return () => auth.initializeSession();
}

export const provideSupabaseAuthInitializer = () => {
  return {
    provide: APP_INITIALIZER,
    useFactory: initializeSessionFactory,
    deps: [AuthService],
    multi: true,
  };
};

Answer 1

在我看来，您的应用程序不会等待身份验证的初始化。我猜你的 authService.InitializeSession() 方法返回可观察的。但在你的工厂中，你并没有返回那个可观察的，事实上，你正在返回一个函数。但工厂已经是一个函数，它不应该返回一个。 所以我相信你应该将其更改为

function initializeSessionFactory(auth: AuthService) {
  return auth.initializeSession();
}

通过这种方式，您可以从工厂返回 observable，并且应用程序应该等待此 observavle 完成，然后再开始应用程序的其余部分

如果不起作用，请提供一些有关您的 authService 如何工作的信息