Angular v11.2.5如何创建支持查询参数的通用重定向端点

针对需要通过查询参数传入重定向地址、登录完成后自动跳转的需求，直接按以下步骤实现即可，兼容子域名跳转场景：

1. 路由守卫层捕获重定向参数 #

未登录用户访问带redirectTo参数的地址时，会被路由守卫拦截跳转到登录页，这一步如果不提前存储参数，原查询参数会直接丢失。在现有的登录鉴权守卫中加入参数持久化逻辑即可：

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

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 捕获查询参数中的重定向目标
    const redirectTarget = route.queryParams.redirectTo;
    if (redirectTarget) {
      // 存入sessionStorage，仅当前标签页生效，避免跨标签页污染
      sessionStorage.setItem('pendingRedirect', redirectTarget);
    }

    // 原有鉴权逻辑
    if (this.authService.isLoggedIn()) {
      return true;
    }
    // 未登录跳转登录页，保留内部回跳地址作为备用
    this.router.navigate(['/login'], {
      queryParams: { returnUrl: state.url }
    });
    return false;
  }
}

访问格式http://example.com?redirectTo=http://subDomain.example.com只要是被该守卫保护的路由，都可以正常捕获到参数，不需要额外修改路由配置。

2. 增加重定向地址安全校验 #

注意：无校验的通用重定向是高危Web漏洞，会被利用做钓鱼攻击、XSS攻击，哪怕当前只用于子域名跳转，也必须加校验逻辑
抽离独立的校验方法，拦截非法地址：

// redirect.util.ts
export function isValidRedirectTarget(
  targetUrl: string,
  allowedDomains: string[] = ['example.com']
): boolean {
  try {
    const url = new URL(targetUrl);
    // 仅允许http/https协议，拦截javascript:、data:等危险协议
    if (!['http:', 'https:'].includes(url.protocol)) return false;
    // 校验域名：支持主域名精确匹配、子域名后缀匹配
    return allowedDomains.some(domain => {
      return url.hostname === domain || url.hostname.endsWith(`.${domain}`);
    });
  } catch (err) {
    // 地址格式非法直接拦截
    return false;
  }
}

如果后续需要支持其他可信域名，直接往allowedDomains数组里加即可。

3. 登录成功后执行跳转 #

在登录接口请求成功的回调里处理跳转逻辑，注意跨域地址不能用Angular内置Router跳转，必须用原生location API：

// login.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { isValidRedirectTarget } from './redirect.util';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  loginForm = { username: '', password: '' };
  errorMsg = '';

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private authService: AuthService
  ) {}

  onSubmit() {
    this.authService.login(this.loginForm).subscribe({
      next: () => {
        // 读取之前存储的重定向目标，读完立刻删除避免脏数据
        const externalRedirect = sessionStorage.getItem('pendingRedirect');
        sessionStorage.removeItem('pendingRedirect');

        // 优先跳校验通过的外部地址
        if (externalRedirect && isValidRedirectTarget(externalRedirect)) {
          window.location.href = externalRedirect;
          return;
        }

        // 无合法外部地址时，跳内部回跳地址或者首页
        const internalReturnUrl = this.route.snapshot.queryParams.returnUrl || '/';
        this.router.navigateByUrl(internalReturnUrl);
      },
      error: () => {
        this.errorMsg = '用户名或密码错误';
      }
    })
  }
}

关键注意点 #

• 外部跨域地址不要用this.router.navigate跳转，Angular Router只处理单页应用内部路由，跨域地址必须用window.location.href
• 不要把重定向地址存在localStorage，多标签页场景会出现跳转目标互相覆盖的问题
• 如果后续确实需要支持非白名单的第三方站点跳转，必须增加中间确认页，明确告知用户即将跳转的外部地址，由用户手动确认后再跳转，禁止静默跳转

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