angularjs给Model添加拦截过滤器,路由增加限制,实现用户登录状态判断
2015-09-30 10:22 风弈飞 阅读(4313) 评论(0) 编辑 收藏 举报使用angularjs的但页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。
angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了
代码中的 $rootScope.user是登录后把用户信息放到了全局rootScope上,方便其他地方使用,$rootScope.defaultPage也是默认主页面,初始化的时候写死到rootScope里的。
1
|
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
|
另外还有用户已经登录,但是登录超时了,还有就是增加后台接口的判断来增强安全性。不能完全依靠本地逻辑
我们在model里面增加一个用户拦截器,在rensponseError中判断错误码,抛出事件让Contoller或view来处理
1
|
app.factory('UserInterceptor', ["$q","$rootScope",function ($q,$rootScope) {
|
别忘了要注册拦截器到angularjs的config中哦
1
|
app.config(function ($httpProvider) {
|
最后在controller中处理错误事件
1
|
$rootScope.$on('userIntercepted',function(errorType){
|
最后还可以在loginController中做更多的细节处理
1
|
// 如果用户已经登录了,则立即跳转到一个默认主页上去,无需再登录
|
另外在登录成功回调后还可以跳转到上一次界面,也就是上面记录的from
1
|
var from = $stateParams["from"];
|
原文请戳: http://www.brafox.com/post/2015/javascript/angularjs/angularjs-router-interceptor.html