Angular 17认证守卫如何获取启动应用的请求头实现JWT深度链接认证

问题本质 #

Angular作为单页应用（SPA），运行在浏览器环境中，前端JavaScript无法直接获取加载应用时的HTTP请求头信息（浏览器安全限制），导致认证守卫无法读取初始请求的Authorization头JWT，进而触发登录跳转。

解决方案：后端中转+前端初始化读取 #

1. 后端提取JWT并注入到index.html

当用户访问受保护的深度链接时，后端先拦截请求，提取Authorization头中的JWT，然后将其注入到返回的index.html中（通过全局变量或meta标签）。

以Node.js/Express为例：

const fs = require('fs');
const path = require('path');

app.get('*', (req, res) => {
  // 提取Bearer token
  const jwtToken = req.headers.authorization?.split(' ')[1];
  // 读取Angular打包后的index.html
  let indexHtml = fs.readFileSync(path.join(__dirname, 'dist', 'index.html'), 'utf8');
  
  if (jwtToken) {
    // 将JWT注入为全局变量，嵌入到head末尾
    indexHtml = indexHtml.replace('</head>', `<script>window.__INITIAL_JWT__ = "${jwtToken}";</script></head>`);
  }
  
  res.send(indexHtml);
});

2. Angular初始化时读取JWT并存储

在Angular应用启动阶段，读取注入的全局变量，将JWT存入认证服务，供守卫使用。

// auth.service.ts
import { Injectable, BehaviorSubject } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private tokenSubject = new BehaviorSubject<string | null>(null);
  public token$: Observable<string | null> = this.tokenSubject.asObservable();

  constructor() {
    // 读取全局变量中的初始JWT
    const initialToken = (window as any).__INITIAL_JWT__;
    if (initialToken) {
      this.setToken(initialToken);
      // 立即删除全局变量，减少泄露风险
      delete (window as any).__INITIAL_JWT__;
    } else {
      // 从本地存储读取已有的token
      const storedToken = localStorage.getItem('jwt');
      if (storedToken) {
        this.tokenSubject.next(storedToken);
      }
    }
  }

  setToken(token: string): void {
    this.tokenSubject.next(token);
    localStorage.setItem('jwt', token);
  }

  getCurrentToken(): string | null {
    return this.tokenSubject.value;
  }

  isTokenValid(token: string): boolean {
    // 验证token过期时间
    const payload = JSON.parse(atob(token.split('.')[1]));
    return payload.exp * 1000 > Date.now();
  }
}

3. 修改认证守卫逻辑

更新认证守卫，优先检查AuthService中的初始JWT，验证通过则允许访问，否则跳转登录页。

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable, take, map } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {
    return this.authService.token$.pipe(
      take(1),
      map(token => {
        if (token && this.authService.isTokenValid(token)) {
          return true;
        }
        // 保存当前路由，登录后跳转回来
        return this.router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } });
      })
    );
  }
}

安全注意事项 #

• 必须使用HTTPS传输，防止JWT在网络传输中被窃取。
• 后端注入JWT前，要先验证token的有效性（签名、过期时间等），避免恶意token进入前端。
• 读取全局变量后立即删除，减少token在页面源码中的暴露时长。

内容的提问来源于stack exchange，提问作者Jan Nielsen