angularjs給Model添加攔截過濾器,路由增加限制，實現用戶登錄狀態判斷

使用angularjs的但頁面應用時，由於是本地路由在控制頁面跳轉，但是有的時候我們需要判斷用戶是否登錄來判斷用戶是否能進入界面。

angularjs是mvc架構所以實現起來很容易也很靈活，我們只MainController里增加一個路由事件偵聽並判斷，這樣就可以避免未登錄用戶直接輸入路由地址來跳轉到登錄界面地址了

代碼中的 $rootScope.user是登錄后把用戶信息放到了全局rootScope上，方便其他地方使用，$rootScope.defaultPage也是默認主頁面，初始化的時候寫死到rootScope里的。

1 2 3 4 5 6 7 8

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){ if(toState.name=='login')return;// 如果是進入登錄界面則允許 // 如果用戶不存在 if(!$rootScope.user || !$rootScope.user.token){ event.preventDefault();// 取消默認跳轉行為 $state.go("login",{from:fromState.name,w:'notLogin'});//跳轉到登錄界面 } });

另外還有用戶已經登錄，但是登錄超時了，還有就是增加后台接口的判斷來增強安全性。不能完全依靠本地邏輯

我們在model里面增加一個用戶攔截器,在rensponseError中判斷錯誤碼，拋出事件讓Contoller或view來處理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

app.factory('UserInterceptor', ["$q","$rootScope",function ($q,$rootScope) { return { request:function(config){ config.headers["TOKEN"] = $rootScope.user.token; return config; }, responseError: function (response) { var data = response.data; // 判斷錯誤碼，如果是未登錄 if(data["errorCode"] == "500999"){ // 清空用戶本地token存儲的信息，如果 $rootScope.user = {token:""}; // 全局事件，方便其他view獲取該事件，並給以相應的提示或處理 $rootScope.$emit("userIntercepted","notLogin",response); } // 如果是登錄超時 if(data["errorCode"] == "500998"){ $rootScope.$emit("userIntercepted","sessionOut",response); } return $q.reject(response); } }; }]);

 

別忘了要注冊攔截器到angularjs的config中哦

1 2 3

app.config(function ($httpProvider) { $httpProvider.interceptors.push('UserInterceptor'); });

最后在controller中處理錯誤事件

1 2 3 4

$rootScope.$on('userIntercepted',function(errorType){ // 跳轉到登錄界面，這里我記錄了一個from，這樣可以在登錄后自動跳轉到未登錄之前的那個界面 $state.go("login",{from:$state.current.name,w:errorType}); });

 

最后還可以在loginController中做更多的細節處理

1 2 3 4 5

// 如果用戶已經登錄了，則立即跳轉到一個默認主頁上去，無需再登錄 if($rootScope.user.token){ $state.go($rootScope.defaultPage); return; }

另外在登錄成功回調后還可以跳轉到上一次界面，也就是上面記錄的from

1 2	var from = $stateParams["from"]; $state.go(from && from != "login" ? from : $rootScope.defaultPage);

原文請戳: http://www.brafox.com/post/2015/javascript/angularjs/angularjs-router-interceptor.html