在AngularJS應用中實現認證授權

在每乙個嚴肅的應用中，認證和授權都是非常重要的乙個部分。單頁應用也不例外。應用並不會將所有的資料和功能都暴露給所有的使用者。使用者需要通過認證和授權來檢視應用的某個特定部分，或者在應用中進行特定的行為。為了在應用中對使用者進行識別，我們需要讓使用者進行登入。

在使用者管理方面，傳統的伺服器端應用和單頁應用的實現方式有所不同，單頁應用能夠和伺服器通訊的方式只有ajax。對於登入和退出來說也是如此。

負責識別使用者的伺服器端需要暴露出乙個認證斷電。單頁應用將會把使用者輸入的資訊傳送到這個節點進行認證。在乙個基於認證系統的典型token中，這項服務用於在認證完畢之後獲取乙個token或者乙個包含已登入使用者的名字和角色資訊的物件。客戶端則需要在所有的安全api中獲取這個token。

由於獲取toekn的行為將會多次發生，我們最好將這個token存在客戶端。在angular中，我們可以將這個值存在乙個服務中，因為服務在客戶端中是乙個單體。但是，如果使用者重新整理了頁面，服務中的值將會丟失。在這種情況下，最好將值存放在乙個有瀏覽器提供的安全儲存中，在這裡我們要是用的是 sessionstorage，因為它在瀏覽器關閉時會自動被清空。

我們現在來看一些**。假設我們已經實現了所有的伺服器端的邏輯，並且有乙個叫做api/login的rest介面進行登入認證，它將返回乙個token。我們來寫乙個簡單的服務用於使用者登入。在後面我們會為這個服務逐漸新增功能：

var userinfo;

function login(username, password) ).then(function(result) ;

$window.sessionstorage["userinfo"] = json.stringify(userinfo);

deferred.resolve(userinfo);

}, function(error) );

return deferred.promise;

} return ;

});

在實際的**中，你可能會想要將儲存的**重構為乙個單獨的服務。在這裡為了簡單起見，我們只是將它放在他用乙個服務中。這個服務可以被乙個用於處理登入功能的控制器所用。

我們需要在應用中設定一些安全路由。如果乙個使用者沒有登入同時想要進入到某乙個安全路由中，他應該被重定向到登入頁。我們可以使用路由選項中的resolve來實現這個功能。下面的**片段展示了其中一種實現思路：

$routeprovider.when("/",  else );}}]
}});

resolve塊可以包含多個**塊，這些**塊將會在完成時返回promise物件。為了說明，上面**中的auth並不在框架中，而是我們自己定義的。你可以根據你的需求來進行修改。

通過或者拒絕路由的原因有很多種。在這裡的情形中，你可以在解析/拒絕乙個promise的時候傳遞乙個物件。我們在服務中還沒有實現getloggedinuser()

方法。它是乙個很簡單的方法，能夠從服務中返回loggedinuser物件。

var userinfo;

function getuserinfo()

});

通過上面的**中的promise傳送的想將會通過$rootscope進行廣播。如果路由被解析，那麼$routechangesuccess事件將會被廣播。然而，如果路由失敗，那麼事件$toutechangeerror將會被廣播。我們將監聽$routechangeerror事件並將使用者重定向到登入頁上。由於事件是在$rootscope層級上，最好在run函式中繫結事件處理器。

$rootscope.$on("$routechangesuccess", function(userinfo) );

$rootscope.$on("$routechangeerror", function(event, current, previous, eventobj)

});}]);

當使用者重新整理頁面時，服務將會失去現有狀態。我們需要從瀏覽器的session storage中獲取資料並將這些值賦值給loggerinuser變數。由於乙個factory只會被呼叫一次，我們需要在乙個初始化函式中設定這個變數，**如下所示：

function init() 
}init();

當使用者想要從應用中退出時，相應的api必須連同包含在請求頭部中的token一起被呼叫。一旦使用者退出，我們還需要清空sessionstorage中的資料。下面例子包含了乙個退出函式，這個函式需要被新增到認證服務中。

function logout() 
}).then(function(result) , function(error) );
return deferred.promise;
}

單頁應用的認證方式和傳統web應用的認證方式非常不同。由於主要的工作都搬到了瀏覽器端，使用者的狀態也需要儲存在客戶端。重要的一點是要記住使用者的狀態也需要的伺服器端儲存和進行驗證，因為駭客很可能慧聰客戶端竊取使用者的資料。

在AngularJS應用中實現認證授權

AngularJS中的MVC模式應用

在angularJS中自定義指令

AngularJS實現原理

在AngularJS應用中實現認證授權

AngularJS中的MVC模式應用

在angularJS中自定義指令

AngularJS實現原理

相關推薦