Spartacus SSR 模式：在组件上应用 AuthGuard 后，虽然用户已经登录，但在刷新时会暂时显示登录屏幕

Question

I am applying Spartacus AuthGuard for some component so that only logged in user can access them, if not then it will redirect Guest to the Login page. It is working fine without SSR mode but when I serve the application using SSR mode then on Refresh, for the logged-in user it redirects to the Login page for a fraction of a second before redirecting to the requisite page.

This problem persists even on Disable SSR mode for the component having AuthGuard. If I remove the AuthGuard from the component then this problem does not happen.

AuthGuard Code:

  canActivate(): Observable<boolean | UrlTree> {
    return this.authService.isUserLoggedIn().pipe(
      map((isLoggedIn) => {
        if (!isLoggedIn) {
          this.authRedirectrvice.reportAuthGuard();
          return this.router.parseUrl(this.semanticPathService.get('login'));
        }
        return isLoggedIn;
      })
    );
  }

I believe it is happening due to server-side rendering as it is never redirected from the browser side(I ensured it by debugging). So is there any solution to avoid redirection from the server-side for a logged user?

Thanks

Answer 1

The UI flickering is unavoidable, becasue SSR doesn't know about the user context, by design. So in SSR you can't get the render of the logged in user. Only in CSR it's possible.

But here described the workaround, how to avoid displaying the Login Page UI for a fraction of time, but some custom, different UI instead: https://github.com/SAP/spartacus/issues/12537