Question

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

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

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

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

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

如何解决此问题，或者有什么更好的方法只允许某些URL，而不是在每条路由中添加防护以检查路由是否在数组中。

Answer 1

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

对于全局RouteGuards，请查看此thread。

路由器在NavigationStart事件中导航

1 个答案: