为什么角度重定向到路线但加载错误的视图
ghu*_*sse 1 javascript angularjs angularjs-routing
我有一个基本的需求,我想用路线来解决:
- 定义了一堆路线
- 如果用户未经过身份验证,则会将其重定向到登录页面
我的问题是,第一次显示Web应用程序时,用户似乎被正确重定向,因为URI是正确的,但不是显示的视图(它对应于默认视图).
我已经为此创建了一个jsbin,如果你更愿意看到它是真的.该结果可以在这里看到.
重现步骤:
- 加载页面
- 您会看到needsAuth,这意味着
needsAuth即使URI包含登录(对应于视图login),也会显示视图的内容 - 重新加载页面
- 你看'登录',意思是视图的内容
login
HTML代码:
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
这是javascript代码:
var template = '{{vm.text}}';
angular
.module('app', ['ngRoute'])
.config(['$routeProvider', routes])
.controller('needsAuthController', needsAuthController)
.controller('loginController', loginController)
.run(['$rootScope', '$location', registerRedirection]);
function routes($routeProvider){
$routeProvider
.when('/needsAuth', {
controller: 'needsAuthController',
controllerAs: 'vm',
template: template
})
.when('/login', {
controller: 'loginController',
controllerAs: 'vm',
template: template
})
.otherwise({
redirectTo: '/needsAuth'
});
}
function needsAuthController(){
var vm = this;
vm.text = 'needsAuth';
}
function loginController(){
var vm = this;
vm.text = 'login';
}
function registerRedirection($rootScope, $location){
$rootScope.$on('$routeChangeStart', function(event, next){
$location.path('/login');
});
}
在第一次加载时,您可以看到URI和内容不匹配
如果我重新加载页面,一切都按预期工作:
有什么我做错了吗？如果是这种情况,在某些条件下重定向用户的正确方法是什么？
[编辑]:Angular 1.2.26似乎在这种情况下表现正确,但不是角度1.3.2
更改
function registerRedirection($rootScope, $location){
$rootScope.$on('$routeChangeStart', function(event, next){
$location.path('/login');
});
}
至
function registerRedirection($rootScope, $location){
$rootScope.$on('$locationChangeStart', function(event, next){
^ change this ^
$location.path('/login');
});
}
然后你的初始负载正常工作.
- 对不起,应该让它更明显!将$ routeChangeStart更改为$ locationChangeStart (2认同)