在一些页面需要登录才能访问的情况下,我们要先检测用户是否已经登录,如果已经登录,则正常访问,如果没有则自动跳转到登录页面,登录之后再自动跳转到需要访问的页面。下面就简单讲一下在Angular中如何使用ui-router来实现这一目标,仍然直接看代码。

1.路由配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
angular.module('mApp').config(function($stateProvider){
$stateProvider
.state('home',{
//home page
})
.state('userpage',{
url:'/user',
authencitate:true,
//other code,such as controller
})
.state('login',{
url:'/login',
// other code
})

})

2.监听$stateChangeStart事件

可以在$rootScope中监听 ,也可以写在一个单独的服务中,这里以$rootScope为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// other code 
angular.module('mApp').run(run);
run.$inject = ['$rootScope','userService'];
function run($rootScope,userService){
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
if(toState.authencitate && !userService.isLogin()){

event.preventDefault();//must
$rootScope.returnState = fromState;
$rootScope.returnParams = fromParams;
$stete.go('login');
}

});
}

3.登录处的逻辑

1
2
3
4
5
6
7
8
//ajax 登录成功后
if(!$rootScope.returnState){
$state.go('home');
//用户直接进的登录页面,returnState为undefined,跳转到默认主页就行了
}
else{
$state.go($rootScope.returnState,$rootScope.returnParams,{reload:true,/* other settings */});
}

这里解释一下代码 ,在$stateChangeStart的监听代码中,判断一下toState,即要去的页面的authencitate是否为true,是的话意味着我们必须要登录才准许访问,如果不需要验证就正常访问(authencitate为自定义字段,什么名字都可以的)。
userService为定义的一个服务,包括判断是否已经登录、登录、登出逻辑。如果用户未登录并且所访问的页面需要授权,那么我们就要阻止跳转事件的正常进行event.preventDefault();,之后把要去的状态和参数暂存为returnState,returnParams,再人为跳转到login页面。
在登录逻辑中,当登录成功后,判断一下returnState是否为空,是的话就直接跳到网站主页,不是就$state.go(returnState,returnParams)就可以了。

通过以上配置,我们就可以实现需求:自动跳转到登录页面并在登录后自动跑回需要访问的页面。

参考

1.Angular.js UI-router redirect after login to requested url

2.ui-router API