在AngularJS應(yīng)用中實現(xiàn)認(rèn)證授權(quán)

在每一個嚴(yán)肅的應(yīng)用中，認(rèn)證和授權(quán)都是非常重要的一個部分。單頁應(yīng)用也不例外。應(yīng)用并不會將所有的數(shù)據(jù)和功能都 暴露給所有的用戶。用戶需要通過認(rèn)證和授權(quán)來查看應(yīng)用的某個特定部分，或者在應(yīng)用中進(jìn)行特定的行為。為了在應(yīng)用中對用戶進(jìn)行識別，我們需要讓用戶進(jìn)行登錄。

在用戶管理方面，傳統(tǒng)的服務(wù)器端應(yīng)用和單頁應(yīng)用的實現(xiàn)方式有所不同，單頁應(yīng)用能夠和服務(wù)器通信的方式只有AJAX。對于登錄和退出來說也是如此。

負(fù)責(zé)識別用戶的服務(wù)器端需要暴露出一個認(rèn)證斷電。單頁應(yīng)用將會把用戶輸入的信息發(fā)送到這個節(jié)點進(jìn)行認(rèn)證。在一個基于認(rèn)證系統(tǒng)的典型token中，這項服務(wù)用于在認(rèn)證完畢之后獲取一個token或者一個包含已登錄用戶的名字和角色信息的對象?？蛻舳藙t需要在所有的安全API中獲取這個token。

由于獲取toekn的行為將會多次發(fā)生，我們最好將這個token存在客戶端。在Angular中，我們可以將這個值存在一個服務(wù)中，因為服務(wù)在客戶端中是一個單體。但是，如果用戶刷新了頁面，服務(wù)中的值將會丟失。在這種情況下，最好將值存放在一個有瀏覽器提供的安全存儲中，在這里我們要是用的是sessionStorage，因為它在瀏覽器關(guān)閉時會自動被清空。

實現(xiàn)登錄

我們現(xiàn)在來看一些代碼。假設(shè)我們已經(jīng)實現(xiàn)了所有的服務(wù)器端的邏輯，并且有一個叫做api/login的REST接口進(jìn)行登錄認(rèn)證，它將返回一個token。我們來寫一個簡單的服務(wù)用于用戶登錄。在后面我們會為這個服務(wù)逐漸添加功能：

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">app<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">factory<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token string" style="color: rgb(102, 153, 0);">"authenticationSvc"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>$http<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> $q<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> $window<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>  <span class="token keyword" style="color: rgb(0, 119, 170);">var</span> userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token keyword" style="color: rgb(0, 119, 170);">function</span> <span class="token function">login<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>userName<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> password<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    <span class="token keyword" style="color: rgb(0, 119, 170);">var</span> deferred <span class="token operator" style="color: rgb(166, 127, 89);">=</span> $q<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">defer<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>    $http<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">post<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token string" style="color: rgb(102, 153, 0);">"/api/login"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>      userName<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> userName<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span>      password<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> password    <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">then<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>result<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>      userInfo <span class="token operator" style="color: rgb(166, 127, 89);">=</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>        accessToken<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> result<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>data<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>access_token<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span>        userName<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> result<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>data<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>userName      <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>      $window<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>sessionStorage<span class="token punctuation" style="color: rgb(153, 153, 153);">[</span><span class="token string" style="color: rgb(102, 153, 0);">"userInfo"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">]</span> <span class="token operator" style="color: rgb(166, 127, 89);">=</span> JSON<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">stringify<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>      deferred<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">resolve<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>    <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>error<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>      deferred<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">reject<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>error<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>    <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>    <span class="token keyword" style="color: rgb(0, 119, 170);">return</span> deferred<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>promise<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span>  <span class="token keyword" style="color: rgb(0, 119, 170);">return</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    login<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> login  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span><span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span></code>

在實際的代碼中，你可能會想要將存儲的代碼重構(gòu)為一個單獨的服務(wù)。在這里為了簡單起見，我們只是將它放在他用一個服務(wù)中。這個服務(wù)可以被一個用于處理登錄功能的控制器所用。

安全路由

我們需要在應(yīng)用中設(shè)置一些安全路由。如果一個用戶沒有登錄同時想要進(jìn)入到某一個安全路由中，他應(yīng)該被重定向到登錄頁。我們可以使用路由選項中的resolve來實現(xiàn)這個功能。下面的代碼片段展示了其中一種實現(xiàn)思路：

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">$routeProvider<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">when<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token string" style="color: rgb(102, 153, 0);">"/"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>  templateUrl<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token string" style="color: rgb(102, 153, 0);">"templates/home.html"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span>  controller<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token string" style="color: rgb(102, 153, 0);">"HomeController"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span>  resolve<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    auth<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">[</span><span class="token string" style="color: rgb(102, 153, 0);">"$q"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token string" style="color: rgb(102, 153, 0);">"authenticationSvc"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>$q<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> authenticationSvc<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>      <span class="token keyword" style="color: rgb(0, 119, 170);">var</span> userInfo <span class="token operator" style="color: rgb(166, 127, 89);">=</span> authenticationSvc<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">getUserInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>      <span class="token keyword" style="color: rgb(0, 119, 170);">if</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>        <span class="token keyword" style="color: rgb(0, 119, 170);">return</span> $q<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">when<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>      <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span> <span class="token keyword" style="color: rgb(0, 119, 170);">else</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>        <span class="token keyword" style="color: rgb(0, 119, 170);">return</span> $q<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">reject<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">{</span> authenticated<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token boolean" style="color: rgb(153, 0, 85);">false</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>      <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span>    <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">]</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span></code>

resolve塊可以包含多個代碼塊，這些代碼塊將會在完成時返回promise對象。為了說明，上面代碼中的auth并不在框架中，而是我們自己定義的。你可以根據(jù)你的需求來進(jìn)行修改。

通過或者拒絕路由的原因有很多種。在這里的情形中，你可以在解析/拒絕一個promise的時候傳遞一個對象。我們在服務(wù)中還沒有實現(xiàn)getLoggedInUser()方法。它是一個很簡單的方法，能夠從服務(wù)中返回loggedInUser對象。

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">app<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">factory<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token string" style="color: rgb(102, 153, 0);">"authenticationSvc"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>  <span class="token keyword" style="color: rgb(0, 119, 170);">var</span> userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token keyword" style="color: rgb(0, 119, 170);">function</span> <span class="token function">getUserInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    <span class="token keyword" style="color: rgb(0, 119, 170);">return</span> userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span></code>

通過上面的代碼中的promise發(fā)送的想將會通過$rootScope進(jìn)行廣播。如果路由被解析，那么$routeChangeSuccess事件將會被廣播。然而，如果路由失敗，那么事件$touteChangeError將會被廣播。我們將監(jiān)聽$routeChangeError事件并將用戶重定向到登錄頁上。由于事件是在$rootScope層級上，最好在run函數(shù)中綁定事件處理器。

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">app<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">run<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">[</span><span class="token string" style="color: rgb(102, 153, 0);">"$rootScope"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token string" style="color: rgb(102, 153, 0);">"$location"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>$rootScope<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> $location<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>  $rootScope<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>$<span class="token function">on<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token string" style="color: rgb(102, 153, 0);">"$routeChangeSuccess"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    console<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">log<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  $rootScope<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>$<span class="token function">on<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token string" style="color: rgb(102, 153, 0);">"$routeChangeError"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>event<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> current<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> previous<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> eventObj<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    <span class="token keyword" style="color: rgb(0, 119, 170);">if</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>eventObj<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>authenticated <span class="token operator" style="color: rgb(166, 127, 89);">===</span> <span class="token boolean" style="color: rgb(153, 0, 85);">false</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>      $location<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">path<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token string" style="color: rgb(102, 153, 0);">"/login"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>    <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span><span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">]</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span></code>

處理頁面刷新

當(dāng)用戶刷新頁面時，服務(wù)將會失去現(xiàn)有狀態(tài)。我們需要從瀏覽器的session storage中獲取數(shù)據(jù)并將這些值賦值給loggerInUser變量。由于一個factory只會被調(diào)用一次，我們需要在一個初始化函數(shù)中設(shè)置這個變量，代碼如下所示：

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">    <span class="token keyword" style="color: rgb(0, 119, 170);">function</span> <span class="token function">init<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>      <span class="token keyword" style="color: rgb(0, 119, 170);">if</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>$window<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>sessionStorage<span class="token punctuation" style="color: rgb(153, 153, 153);">[</span><span class="token string" style="color: rgb(102, 153, 0);">"userInfo"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">]</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>        userInfo <span class="token operator" style="color: rgb(166, 127, 89);">=</span> JSON<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">parse<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>$window<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>sessionStorage<span class="token punctuation" style="color: rgb(153, 153, 153);">[</span><span class="token string" style="color: rgb(102, 153, 0);">"userInfo"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">]</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>      <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span>    <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token function">init<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span></code>

退出

當(dāng)用戶想要從應(yīng)用中退出時，相應(yīng)的API必須連同包含在請求頭部中的token一起被調(diào)用。一旦用戶退出，我們還需要清空sessionstorage中的數(shù)據(jù)。下面例子包含了一個退出函數(shù)，這個函數(shù)需要被添加到認(rèn)證服務(wù)中。

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;"><span class="token keyword" style="color: rgb(0, 119, 170);">function</span> <span class="token function">logout<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>  <span class="token keyword" style="color: rgb(0, 119, 170);">var</span> deferred <span class="token operator" style="color: rgb(166, 127, 89);">=</span> $q<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">defer<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  $<span class="token function">http<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    method<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token string" style="color: rgb(102, 153, 0);">"POST"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span>    url<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> logoutUrl<span class="token punctuation" style="color: rgb(153, 153, 153);">,</span>    headers<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>      <span class="token string" style="color: rgb(102, 153, 0);">"access_token"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> userInfo<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>accessToken    <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">then<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span><span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>result<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    $window<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>sessionStorage<span class="token punctuation" style="color: rgb(153, 153, 153);">[</span><span class="token string" style="color: rgb(102, 153, 0);">"userInfo"</span><span class="token punctuation" style="color: rgb(153, 153, 153);">]</span> <span class="token operator" style="color: rgb(166, 127, 89);">=</span> <span class="token keyword" style="color: rgb(0, 119, 170);">null</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>    userInfo <span class="token operator" style="color: rgb(166, 127, 89);">=</span> <span class="token keyword" style="color: rgb(0, 119, 170);">null</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>    deferred<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">resolve<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>result<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">,</span> <span class="token keyword" style="color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="color: rgb(153, 153, 153);">(</span>error<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>    deferred<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span><span class="token function">reject<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>error<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>  <span class="token keyword" style="color: rgb(0, 119, 170);">return</span> deferred<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>promise<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span><span class="token punctuation" style="color: rgb(153, 153, 153);">}</span></code>

總結(jié)

單頁應(yīng)用的認(rèn)證方式和傳統(tǒng)web應(yīng)用的認(rèn)證方式非常不同。由于主要的工作都搬到了瀏覽器端，用戶的狀態(tài)也需要存儲在客戶端。重要的一點是要記住用戶的狀態(tài)也需要的服務(wù)器端保存和進(jìn)行驗證，因為駭客很可能慧聰客戶端竊取用戶的數(shù)據(jù)。