Angular 14中使用HashLocationStrategy处理无哈希符号的第三方重定向链接

碰到第三方不带哈希前缀的重定向链接确实挺闹心的，毕竟咱们用了HashLocationStrategy，Angular默认只会识别#后面的路由部分。不过别担心，咱们可以从应用启动前的URL处理和服务器配置两方面来搞定这个问题，还能完整保留请求参数。

第一步：在Angular启动前处理URL重定向 #

因为路由守卫在Angular应用初始化完成前是不会触发的，所以咱们得在应用启动前就检查并修正URL。直接在main.ts里加一段处理逻辑就行：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 处理不带哈希的第三方重定向URL
const fixNonHashRedirect = () => {
  const currentUrl = window.location.href;
  // 判断当前URL是否已经包含哈希符号
  if (!currentUrl.includes('#')) {
    // 提取路径和查询参数（比如/login?parameters里的/login和?parameters）
    const path = window.location.pathname;
    const searchParams = window.location.search;
    // 构造带哈希的正确URL
    const correctedUrl = `${window.location.origin}/#${path}${searchParams}`;
    // 用replace跳转，避免回退时回到旧的无哈希URL
    window.location.replace(correctedUrl);
  }
};

// 先处理URL再启动应用
fixNonHashRedirect();

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

这段代码会在Angular初始化前检查当前URL，如果没有#，就把原路径和参数拼到#后面，然后重定向过去。这样Angular加载后，就能正常解析#/login?parameters这种格式的路由，请求参数也能完整保留。

第二步：确保服务器配置支持单页应用 fallback #

这一步很关键，不然第三方跳转到localhost:8080/login?parameters时，服务器会去找名为login的页面，而咱们的单页应用只有index.html。

• 开发环境（Angular CLI Dev Server）：默认已经配置好了fallback，不用额外修改。
• 生产环境（比如Nginx）：需要在Nginx配置里添加try_files指令，让所有请求都返回index.html：

location / {
  try_files $uri $uri/ /index.html;
}

• Apache：可以通过.htaccess配置：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

验证效果 #

做完上面两步后，第三方跳转到localhost:8080/login?parameters时，服务器会返回index.html，然后main.ts里的逻辑会把URL重定向到localhost:8080/#/login?parameters，Angular就能正常识别路由，你也能通过ActivatedRoute获取到请求参数了。

备注：内容来源于stack exchange，提问作者Vitaly