javascript - 如何使用具有正确 url 的 ui-router 路由以解决错误页面

Question

我们正在使用最新版本的 Angular 和 AngularUI Router

用户在某个页面 /foo 上。他们单击一个链接以导航到 /bar。 bar 状态定义了一个从服务器获取一些数据的解析函数。为了处理失败情况，我们有一个 $stateChangeError 处理程序，它会检查错误并将您带到正确的错误页面(例如 500、403、401 等)。当用户确实在访问 /bar 时遇到错误，他们最终会遇到类似 /errors/500 的内容。但是，这是不对的。当您导航到 web 上的 url 并遇到错误时，您最终到达的 url 应该是您打算访问的 url。也就是说，如果您在访问 /bar 时遇到 500 错误，您的位置应该是 /bar。

有没有人在 ui-router 中解决这个问题？尝试的事情:

• 使用 toState 和 toParams 构建目标 url，然后在转到错误页面后在错误处理程序中调用 $location.url/path。这将重新运行路由并尝试再次获取数据。
• 在转到错误页面后调用 history.replaceState。这似乎真的会扰乱 ui-router，并且似乎会触发意外的状态更改。
• 硬着头皮使用错误状态，例如 /errors/500。这打破了后退按钮。如果您登陆页面并且服务器在尝试加载它时返回错误，则错误处理程序会将状态更改为错误页面，因此当您点击后退按钮时，您将返回到 /foo 它会再次尝试解析并再次遇到错误，然后将您带回 /errors/500。

Answer 1

我所做的是创建一些错误状态，例如:

        .state('notFound', {
            url: '/errors/404',
            template: '<h1>Not Found</h1>' 
        })
        .state('accessDenied', {
            url: '/errors/403',
            template: '<h1>Access Denied</h1>'          
        })

然后，在处理错误时，添加不更新位置的选项:

        $state.go('notFound', {}, {location: false});

这会导致更改为 notFound 状态，但不会更新浏览器地址栏，因此用户仍会看到您希望的以前的 url。