Angular集成AWS Cognito认证后如何重定向至用户初始访问URL

核心思路是 未认证拦截时先完整缓存用户的目标访问地址，认证流程走完后读取缓存地址完成跳转，全程保留原始路径和携带的query参数，具体实现如下：

1. 路由守卫层缓存原始访问路径 #

在现有认证路由守卫里，判断用户未登录时，不要直接跳转登录页，先把当前待访问的完整URL（包括所有query参数）存入sessionStorage，再触发登录流程。

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { AuthService } from './auth.service'; // 项目内封装的Cognito认证逻辑服务

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

  canActivate(): boolean | UrlTree {
    // 已认证直接放行
    if (this.authService.isLoggedIn()) {
      return true;
    }
    // 缓存完整访问路径，自动包含邮件携带的所有query参数
    const targetUrl = this.router.url;
    sessionStorage.setItem('post_auth_redirect', targetUrl);
    // 跳转本地登录页 或 直接触发Cognito托管UI跳转逻辑
    return this.router.createUrlTree(['/login']);
  }
}

这里选sessionStorage而非localStorage，是因为sessionStorage为单标签页隔离存储，不会出现多标签页同时操作时跳转地址互相覆盖的问题。

2. 认证成功回调中执行重定向 #

不管是本地账号密码登录走Cognito接口认证成功，还是Cognito托管UI跳回应用的回调路由，在完成token存储、用户态初始化的逻辑之后，读取之前缓存的地址执行跳转，跳转完成后清除缓存避免后续误触发。

// 登录页组件 / Cognito回调路由组件内的认证成功逻辑
async onAuthSuccess() {
  // 先完成Cognito凭证存储、用户信息拉取等初始化逻辑
  await this.authService.setupAuthState();

  const savedTargetUrl = sessionStorage.getItem('post_auth_redirect');
  if (savedTargetUrl) {
    sessionStorage.removeItem('post_auth_redirect');
    // 用navigateByUrl直接解析完整路径，保证query参数不丢失
    this.router.navigateByUrl(savedTargetUrl);
    return;
  }
  // 无缓存目标地址时跳转默认首页
  this.router.navigate(['/dashboard']);
}

3. 异常场景兜底处理 #

需要注意几个容易出问题的点：

• 跳转前可以对缓存的地址做合法性校验，只允许跳转到应用内的相对路径，避免开放重定向安全风险。
• 如果使用Cognito托管UI，要把应用的回调路由地址加入Cognito用户池的允许回调列表，否则会被Cognito拦截。
• 如果目标路径本身是受保护的路由，守卫会在跳转时自动再次校验认证状态，不需要额外加判断逻辑。

内容的提问来源于stack exchange，提问作者Alvin R