Angular 安全驗證

在開發的過程當中，遇到身份驗證的問題，若是在不登陸的狀況下直接訪問項目的地址，怎麼對用戶的身份進行驗證？常見的處理是：若是沒有讀取到用戶的登陸信息，則頁面自動轉向登陸頁面，那麼做爲開發人員，怎麼實現此需求？目前據我所知的解決方案有兩種。第一種是用ui-router提供的$stateChangeStart對於發生路由轉換時進行判斷，第二種則是用angular自帶的攔截器進行處理。
先說第一種：$stateChangeStart
因爲ui-router關心的是狀態，因此咱們能夠在每次模板引擎被解析前觸發此方法

// 路由改變時判斷是否登陸，未登陸則跳轉至登陸頁面
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        // 這裏用event.preventDefault()能夠阻止模板解析
        if (toState.name !== 'login' || fromState.name === 'login') {
             // 這裏作身份驗證的判斷
            //  如判斷cookie，session等。
           //  若判斷不經過，則跳轉至login頁面
        }
 });

其中toState和fromState參數是獲取路由的前一個狀態和下一個狀態，當發生路由狀態改變時，若是訪問的不是登錄頁面或者不是從登錄頁面跳轉時，執行身份判斷。
可是這種方法是有缺陷的，1.用到了$rootScope. 2.基於ui-router.3.不穩定(項目中測試發現).因爲問題的存在，因此能夠採用第二種攔截器的方法解決這些問題。

攔截器 Angular Interceptor
在與後臺交互的過程當中，有時會但願俘獲一些請求，在其發送到服務端以前進行操做，或者在服務器完成響應執行調用前處理，攔截器就是爲此應運而生的一種方法。
$httpProvider 中有一個 interceptors 數組，而所謂攔截器只是一個簡單的註冊到了該數組中的常規服務工廠。攔截器提供了四個方法：request ， requestError ，response 和responseError 來對請求和響應進行處理。具體介紹看這裏：
要實現身份驗證，能夠在每次$http請求到後臺以前進行驗證

function requestInterceptor($cookies,) {
    var requestConfig = {
        request: function(config) {
             // 這裏作身份驗證的判斷
            //  如判斷cookie，session等。
           //  若判斷不經過，則跳轉至login頁面
            return config;
        }
    };
        return requestConfig;
}

該方法接收請求配置對象做爲參數，而後必須返回配置對象或者 promise 。若是返回無效的配置對象或者 promise 則會被拒絕，致使 $http 調用失敗。而後只需將建立的攔截器註冊到$httpProvider的interceptors數組中便可。

module.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('myInterceptor');
}]);

在每次發送請求前，攔截器都會執行咱們事先寫好的判斷代碼，去作身份的驗證。比stateChangeStart好的是，它在每次請求前都進行驗證，而不僅是對於路由切換時才驗證。

攔截器能夠作的事情還有不少，如請求恢復、loading等，搭配request ， requestError ，response 和responseError實現便可，這裏不作贅述。