AngularJS實現使用者登入狀態判斷的方法(Model添加攔截過濾器,路由增加限制)_AngularJS

本文執行個體講述了AngularJS實現使用者登入狀態判斷的方法。分享給大家供大家參考，具體如下：

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

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

代碼中的 $rootScope.user是登入後把使用者資訊放到了全域rootScope上，方便其他地方使用，$rootScope.defaultPage也是預設首頁面，初始化的時候寫死到rootScope裡的。

$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來處理

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中哦

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

最後在controller中處理錯誤事件

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

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

// 如果使用者已經登入了，則立即跳轉到一個預設首頁上去，無需再登入if($rootScope.user.token){  $state.go($rootScope.defaultPage);  return;}

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

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

更多關於AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程式設計有所協助。