路由器在 NavigationStart 事件中导航答案

【问题标题】：Router navigate inside NavigationStart event路由器在 NavigationStart 事件中导航
【发布时间】：2019-02-25 17:15:31
【问题描述】：

我需要限制对某些页面的访问，如果用户尝试访问该页面，我需要将其重定向到主页。所以为此我有以下代码：

this.router
    .events
    .subscribe(
        (event) => {
            if (event instanceof NavigationStart) {
                if (!AllowedRoutes.includes(event.url)) {
                    this.router.navigate(['/']);
                }
            }
        }
    );

AllowedRoutes 是一个数组，其中包含所有允许的路由 url，如下所示：

export const AllowedRoutes: any = [
    '/allowed-route-one',
    '/allowed-route-two',
    '/allowed-route-three'
];

当我使用this.router.navigate(['/']); 时，它在控制台中显示错误Maximum call stack size exceeded

如何解决这个问题，或者有没有更好的方法来只允许某些 URL，而不是在每个路由中添加一个保护来检查该路由是否在数组中。

【问题讨论】：

标签： javascript angular routes navigation

【解决方案1】：

问题是您使用this.router.navigate(['/']); 导航到/，这不是AllowedRoutes 的元素。这会创建循环，因为到 / 的每个导航都会被重定向到 /。

对于全球RouteGuards，看看这个thread。

【讨论】：

非常感谢。我刚刚添加了一个条件是 && event.url !== '/'