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);