到基本 href 之外的 URL 的 Angular 路由答案

【问题标题】：Angular route to a URL outside the base href到基本 href 之外的 URL 的 Angular 路由
【发布时间】：2021-05-31 08:35:35
【问题描述】：

当我们的 Angular 应用程序中的服务执行 HTTP 请求时，我们希望将用户引导到登录页面。

这是我们的设置：

这是我们正在尝试的：

@Injectable({
    providedIn: 'root'
})
export class ServiceHelper {
    constructor(private router: Router) {}

    public handleError<T>(result?: T): (error: any) => Observable<T> {
        {
            return (error: HttpErrorResponse): Observable<T> => {
                if (error.status === 401) {
                    // Direct the user to login
                    this.router.navigate(['/login']);
                }
                console.error(error);
                return of(result as T);
            };
        }
    }
}

问题是在 401 上，浏览器被定向到 https://foo.bar/ui/login。我们在 angular.json 中使用“base-href=/ui”运行应用程序。我们的登录应用是一个不同的系统，在 base-href 之外。

有什么好的方法可以告诉 Angular 的路由器将用户重定向到同一服务器上的绝对 URL，在 base-href 之外？

谢谢！

【问题讨论】：

我认为router 仅适用于内部路由。要从应用导航到外部路由，我会使用 Window 对象。 stackoverflow.com/a/1226718/7365461
@AliF50 我认为你是对的。通过尝试this.router.navigateByUrl('/../login');，我可以让浏览器的地址栏显示正确的 URL。但即使这样也行不通，似乎 b/c 这是一条外部路线。 window.location.href = '/../login' 似乎有效。如果你写一个答案，我会接受它

标签： angular angular-routing

【解决方案1】：

使用HTTP拦截器，拦截请求对象中的URL。如果 URL 包含“login”作为子字符串，请将 URL 替换为 https://foo.bar/login。

This 可能会有所帮助

【讨论】：

【解决方案2】：

Angular 路由器仅用于应用程序的内部路由。要从应用导航到外部路由，我会使用 Window 对象。 Check it out here

【讨论】：

这通过使用window.location.href = '/../login'; 而不是router 服务解决了我的问题。注意/../，它让我可以遍历一个目录。