Angular Universal 刷新或点击邮件跳转链接时短暂闪现登录页问题

• 核心原因是Angular Universal服务端渲染环节无法读取浏览器端的本地存储（localStorage/sessionStorage），如果登录凭证存在上述存储中，项目的路由守卫在服务端执行时拿不到登录状态，会直接判定为未登录，放行到登录页，服务端就把登录页的HTML返回给浏览器了。
• 等客户端 hydration 完成后，前端代码成功读取到本地存储的登录凭证，路由守卫才会重定向到实际要访问的目标路由，就出现了先闪登录页再切到目标页的现象。

方案1：将登录凭证存在Cookie中，SSR服务端主动读取请求里的Cookie #

这是兼顾SEO和用户体验的最优解，操作步骤如下：

• 调整登录逻辑，把用户登录后的token、登录状态存在Cookie里，设置path=/保证所有请求都能带上Cookie
• 服务端渲染时，通过REQUEST注入器拿到当前请求的Cookie，解析出登录状态传给路由守卫，让服务端就能正确判断登录态，直接渲染目标页的HTML
  示例关键代码：

// 路由守卫逻辑
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { REQUEST } from '@nguniversal/express-engine/tokens';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(REQUEST) private req: any,
    private router: Router
  ) {}

  canActivate(): boolean | UrlTree {
    let isLoggedIn = false;
    if (isPlatformServer(this.platformId)) {
      // 服务端从请求Cookie里拿登录态
      const cookies = this.req.cookies || {};
      isLoggedIn = !!cookies.userToken;
    } else {
      // 客户端从Cookie或者本地存储拿登录态
      isLoggedIn = !!document.cookie.match(/userToken=/) || !!localStorage.getItem('userToken');
    }
    if (isLoggedIn) return true;
    return this.router.parseUrl('/login');
  }
}

方案2：路由守卫在服务端直接放行，客户端再做登录校验 #

如果不需要内部页面做SEO，可以用这个低成本方案：

• 修改路由守卫，在服务端执行时直接返回true，等客户端hydration完成后再做登录态校验，重定向未登录的用户
• 可额外加一个全局骨架屏代替空白/登录页闪屏，优化用户体验
  示例关键代码：

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private router: Router
  ) {}

  canActivate(): boolean | UrlTree {
    // 服务端不做登录校验，直接放行
    if (isPlatformServer(this.platformId)) return true;
    // 客户端正常校验
    const isLoggedIn = !!localStorage.getItem('userToken');
    if (isLoggedIn) return true;
    return this.router.parseUrl('/login');
  }
}

方案3：跳过敏感路由的SSR渲染 #

对于需要登录才能访问的内部路由，直接配置不做SSR，所有渲染逻辑都在客户端执行，也能避免登录页闪屏，配置示例：

// server.ts 服务端入口文件
server.get('*', (req, res) => {
  // 匹配需要登录的内部路由前缀，跳过SSR直接返回客户端渲染模板
  if (req.path.startsWith('/dashboard') || req.path.startsWith('/user')) {
    res.sendFile('dist/browser/index.html');
    return;
  }
  // 其他公开路由正常走SSR逻辑
  res.render('index', { req, res });
});

• 如果你对内部页面的SEO有要求，优先选择方案1，保证服务端能渲染正确的页面内容给搜索引擎爬虫
• 若内部页面不需要SEO，方案2和方案3实现成本更低，也能快速解决闪屏问题

内容的提问来源于stack exchange，提问作者Pavan Jadda