Recientemente habilité Angular Universal en mi proyecto. Todo funciona como se esperaba, excepto por un problema extraño. Cada vez que actualizo la página o hago clic en un enlace en el correo electrónico que navega a la página web, veo la página de inicio de sesión por un breve segundo y luego se carga la página real.
Proyecto de muestra creado y subido a Github. Recuerde que la demora puede no ser tan larga como en mi proyecto real.
Enlace de repositorio de Github: https://github.com/pavankjadda/angular-ssr-docker
Problema :
Resulta que cuando Ng Express Engine carga la página web, no tiene acceso a las cookies. Por lo tanto, redirige al usuario a la página de inicio de sesión, pero tan pronto como el navegador carga JavaScript (Angular), que verifica las cookies y valida las protecciones de autenticación, redirige al usuario a la página web real. La solución ideal sería hacer que las cookies estén disponibles en el lado del servidor (enviándolas a través de una request ) y asegurarse de que pasen los protectores de autenticación. Intenté enviar las cookies a través de server.ts , pero no pude hacerlo funcionar.
Trabajar alrededor :
Hasta que descubra que la solución aquí es el trabajo que seguí. Cada vez que buscamos cookies, determina si la plataforma es un servidor, en caso afirmativo, devuelve true . Estos son los pocos lugares donde puede hacer este cambio
authservice.ts devuelva verdadero cuando la plataforma es servidor /** * Returns true if the 'isLoggedIn' cookie is 'true', otherwise returns false * * @author Pavan Kumar Jadda * @since 1.0.0 */ isUserLoggedIn(): boolean { return isPlatformServer(this.platformId) || (this.cookieService.get('isLoggedIn') === 'true' && this.cookieService.check('X-Auth-Token')); } @Injectable({ providedIn: 'root' }) export class CoreUserAuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router, @Inject(PLATFORM_ID) private platformId: any,) { } canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { const url: string = state.url; return this.checkLogin(url); } /** * Returns true if the user is Logged In and has Core user role * * @author Pavan Kumar Jadda * @since 1.0.0 */ private checkLogin(url: string): boolean { // Return if the platform is server if (isPlatformServer(this.platformId)) return true; if (this.authService.isUserLoggedIn() && this.authService.hasCoreUserRole()) { return true; } if (this.authService.isUserLoggedIn() && !this.authService.hasCoreUserRole()) { this.router.navigate(['/unauthorized']); } // Store the attempted URL for redirecting this.authService.redirectUrl = url; // Navigate to the login page with extras this.router.navigate(['/login']); return false; } }Nota : Se agregó trabajo por aquí, en caso de que alguien tenga un problema similar. Cuando tenga una solución real al problema, actualizaré esta respuesta.
cambie su función isUserLoggedIn() en el servicio de autenticación a:
public async isUserLoggedIn(): Promise<boolean> { const isLoggedIn = await this.cookieService.check("token"); return isLoggedIn; }