Question

我们使用的是最新版本的Angular和AngularUI路由器

用户位于某个页面/foo。他们点击链接导航到/bar。 bar状态定义了一个从服务器获取某些数据的解析函数。为了处理故障情况，我们有一个$stateChangeError处理程序来检查错误并带您到正确的错误页面（例如500,403,401等）。当用户确实遇到/bar的错误时，他们会遇到类似/errors/500的错误。但是，这是不对的。当您导航到网络上的网址并遇到错误时，您最终应该输入的网址您打算转到的网址。即如果您遇到500 /bar错误，您的位置应为/bar。

是否有人在ui-router中发现了这一点？事情在尝试：

使用toState和toParams构建目标网址，然后在转到错误页面后在错误处理程序中调用$ 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。

Answer 2

这是一个非常有趣的问题，我有点想知道如何正确地做到这一点！

我对此的看法是使用附加到主控制器的服务来处理导航状态。

我执行以下操作：

使用named views，并定义根抽象状态（以保存常见视图，例如错误页面）。
使用status属性定义NavigationStatus服务。 status可以是根据需要格式化的对象（例如：{code:403, reason:'Nope ! No way !'}）
将NavigationStatus服务附加到主控制器，包裹整个页面。
将我的变量内容（ui-view）包含在绑定到已注册导航状态的条件块（ng-if）中，以便在发生错误时删除内容。
以开关/案例方式添加其他条件块，以显示错误状态。这些可以模板化，期望导航状态对象具有一组已定义的属性，并使用根抽象状态中的视图。
在内容检索上，系统地将成功或错误状态推送到NavigationStatus服务。我通常在Controller中做，但我想你也可以做一个ui-router解决方案。成功后，我的主要ui视图会显示出来。出错时，它会被友好消息取代，而不会更改URL。

希望有所帮助！：）

PS :(如果你有兴趣，我可以带一个工作实例，但是现在我有点太累了）

如何路由解决错误页面使用ui-router和正确的URL

2 个答案: