Angular中如何跳转至base-href配置范围外的同域绝对URL

Angular Router 从设计上就是用于管理单页应用内部的视图跳转，所有路径解析都会自动拼接你在angular.json中配置的base-href前缀，没有可靠的方式让它完成跳出当前应用部署路径范围的跨应用跳转。你目前遇到的跳转成https://foo.bar/ui/login的问题，本质是把应用内路由工具用在了跨系统跳转的场景，和传参写法无关——哪怕调整Router跳转的参数，它依然会强制叠加/ui前缀，最终落到当前应用不存在的路由路径上，触发应用内404，根本到不了独立登录系统。

401状态下跳转到完全独立的外部登录系统，本质是需要浏览器加载一个全新的独立HTML文档，不属于单页应用内部路由的范畴，直接使用浏览器原生的window.location API是最稳定的方案：

• 路径解析规则的天然适配：原生location API处理以/开头的路径时，会直接基于当前域名的根路径拼接地址，完全不受Angular应用的base-href配置影响。比如你的站点域名是https://foo.bar，执行window.location.href = '/login'时，最终生成的跳转地址就是https://foo.bar/login，刚好匹配目标独立登录系统的路径，不会错误拼接/ui前缀。
• 可维护性更强：不需要硬编码完整的域名+协议URL，后续如果域名调整、登录系统路径迁移，只需要修改路径配置即可，不会因为环境变化导致跳转失效。

• 不要尝试通过修改Router配置、传特殊路由参数来“绕过”base href的拼接逻辑：Router的内置URL序列化器强制要求所有应用内跳转的路径都要叠加base路径，哪怕你调用navigateByUrl传入手写的完整路径，最终还是会被自动拼接/ui前缀，属于无效折腾。
• 不要为了这个场景修改angular.json里的base-href配置：你当前的Angular应用本身就是部署在/ui路径下的，修改base href会直接导致应用内所有正常路由失效、静态资源加载路径错误，得不偿失。

@Injectable({
    providedIn: 'root'
})
export class ServiceHelper {
    // 正常保留Router注入，用于处理应用内的常规跳转逻辑即可
    constructor(private router: Router) {}

    public handleError<T>(result?: T): (error: any) => Observable<T> {
        return (error: HttpErrorResponse): Observable<T> => {
            if (error.status === 401) {
                // 替换原有的Router跳转逻辑
                window.location.href = '/login';
            }
            console.error(error);
            return of(result as T);
        };
    }
}

因为目标登录系统是完全独立的应用，本身就需要重新加载独立的静态资源，这种整页跳转不存在单页应用场景下的性能损耗。如果需要在跳转前做额外的清理逻辑（比如清空本地存储、终止未完成的HTTP请求），完全可以在给location.href赋值之前执行对应操作，不会影响跳转效果。

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