在 resolve() 引发错误后重定向到模板时的 Angular UI 路由器问题 [英] Angular UI Router issue when redirecting to a template after resolve() throws error
问题描述
所以我花了很长时间才理解这个问题并进入mcve.情况如下:当用户未通过身份验证时，我试图将用户重定向到登录页面(这是非常基本的).这是代码:
So It took me a very long time to understand this issue and get to a mcve. Here is the case : I'm trying to redirect a user to a login page when he's not authenticated (this is very basic). Here is the code :
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<div ui-view></div>
<script id="login.html" type="text/ng-template">
l
</script>
<script id="welcome.html" type="text/ng-template">
w
</script>
</body>
</html>
JS:
angular.module('starter', ['ui.router'])
.run(["$rootScope", "$state", function($rootScope, $state) {
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
if (error === "nope") {
$state.go("login");
}
});
}])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/welcome');
$stateProvider
.state('welcome', {
url: '/welcome',
templateUrl: 'welcome.html',
resolve: {
"auth": ["$q", function($q) {
return $q.reject("nope");
}]
}
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
});
views/login.html"只包含vl"以查看它在屏幕上的显示.所以，当上面的代码运行时，输出是好的，但是看看 Chrome 控制台:
The "views/login.html" contains just "vl" to see it showing on the screen. So, when the above code is ran, the output is good, but look at the Chrome console :
现在，最疯狂的部分是，如果您修改 JS 并替换
Now, the crazy part of it, is if you modify the JS and replace
templateUrl: 'views/login.html'
在登录状态简单
templateUrl: 'login.html'
使用 html 中定义的 ng-template，一切都很好！好吧，我想使用文件作为模板必须触发一些观察者或其他什么......好吧，不，我只是没有想法.
using the ng-template defined in the html, ALL IS GOOD ! So well, I guess using a file as template must trigger some watcher or whatever... Well no, I'm just out of ideas.
提前感谢您的帮助！
这里有两件事可以提供帮助:
here are two things that could help :
- 使用 ngRoute 代替 UI Router 时没有错误
- 用 1.2.25 替换 Angular 版本没有错误
所以我认为这是 UI Router 和 Angular 1.3 的一个错误.但是完全不知道怎么解决.
So I think it's a bug with UI Router and Angular 1.3. But don't know at all what to do to solve it.
推荐答案
在调用 $state.go() 之前，您需要先调用 event.preventDefault().
You need to call event.preventDefault() before you call $state.go().
参见此处:http://plnkr.co/edit/eUosIpdN7adJFxfDo3kV?p=preview
正如您已经确定的，发生此错误的主要原因是模板 url 'views/login.html' 不存在.您说当您将模板 url 从 'views/login.html' 更改为 'login.html' 时，一切正常，这是有道理的，因为该模板确实存在.
The main reason this error is occuring, as you have already identified, is that the template url 'views/login.html' doesn't exsit. You said that when you changed the template url from 'views/login.html' to 'login.html' everything worked, and this makes sense because that template does exist.
您看到无限摘要错误的原因是，每次您尝试访问 welcome 状态时，auth 解析器都会抛出一个错误，从而触发 $stateChangeError 事件就像您期望的那样.一切都很好，直到它尝试进入 login 状态.尝试转换到 login 状态失败，因为模板 url 'views/login.html' 不存在，并且此失败导致您的 否则code> 重定向使您回到 welcome 状态.此时可以看到，回到welcome 状态将重新开始整个循环并导致无限摘要循环.
The reason you are seeing the infinite digest error is that each time you try to access the welcome state the auth resolver is throwing an error which triggers the $stateChangeError event like you would expect it too. Everything is fine up until the point when it tries to go to the login state. Attempting to transition to the login state fails because the template url 'views/login.html' doesn't exist, and this failure is causing your otherwise redirect to bring you back to the welcome state. You can see at this point that arriving back at the welcome state will restart the whole cycle and cause the infinite digest loop.
正如您已经发现的那样，只需确保您的模板网址正确即可防止这种情况发生.
Simply ensuring that your template urls are correct should prevent this from happening, as you have already discovered.
这篇关于在 resolve() 引发错误后重定向到模板时的 Angular UI 路由器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
