在AngularJS应用中实现认证授权

在AngularJS应用中实现认证授权

在每一个严肃的应用中，认证和授权都是非常重要的一个部分。单页应用也不例外。应用并不会将所有的数据和功能都 暴露给所有的用户。用户需要通过认证和授权来查看应用的某个特定部分，或者在应用中进行特定的行为。为了在应用中对用户进行识别，我们需要让用户进行登录。

在用户管理方面，传统的服务器端应用和单页应用的实现方式有所不同，单页应用能够和服务器通信的方式只有AJAX。对于登录和退出来说也是如此。

负责识别用户的服务器端需要暴露出一个认证断电。单页应用将会把用户输入的信息发送到这个节点进行认证。在一个基于认证系统的典型token中，这项服务用于在认证完毕之后获取一个token或者一个包含已登录用户的名字和角色信息的对象。客户端则需要在所有的安全API中获取这个token。

由于获取toekn的行为将会多次发生，我们最好将这个token存在客户端。在Angular中，我们可以将这个值存在一个服务中，因为服务在客户端中是一个单体。但是，如果用户刷新了页面，服务中的值将会丢失。在这种情况下，最好将值存放在一个有浏览器提供的安全存储中，在这里我们要是用的是sessionStorage，因为它在浏览器关闭时会自动被清空。

实现登录

我们现在来看一些代码。假设我们已经实现了所有的服务器端的逻辑，并且有一个叫做

api/login

的REST接口进行登录认证，它将返回一个token。我们来写一个简单的服务用于用户登录。在后面我们会为这个服务逐渐添加功能：

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

在实际的代码中，你可能会想要将存储的代码重构为一个单独的服务。在这里为了简单起见，我们只是将它放在他用一个服务中。这个服务可以被一个用于处理登录功能的控制器所用。

安全路由

我们需要在应用中设置一些安全路由。如果一个用户没有登录同时想要进入到某一个安全路由中，他应该被重定向到登录页。我们可以使用路由选项中的

resolve

来实现这个功能。下面的代码片段展示了其中一种实现思路：

<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

并不在框架中，而是我们自己定义的。你可以根据你的需求来进行修改。

通过或者拒绝路由的原因有很多种。在这里的情形中，你可以在解析/拒绝一个promise的时候传递一个对象。我们在服务中还没有实现

getLoggedInUser()

方法。它是一个很简单的方法，能够从服务中返回

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发送的想将会通过$rootScope进行广播。如果路由被解析，那么$routeChangeSuccess事件将会被广播。然而，如果路由失败，那么事件$touteChangeError将会被广播。我们将监听$routeChangeError事件并将用户重定向到登录页上。由于事件是在$rootScope层级上，最好在

run

函数中绑定事件处理器。

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

处理页面刷新

当用户刷新页面时，服务将会失去现有状态。我们需要从浏览器的session storage中获取数据并将这些值赋值给loggerInUser变量。由于一个factory只会被调用一次，我们需要在一个初始化函数中设置这个变量，代码如下所示：

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

退出

当用户想要从应用中退出时，相应的API必须连同包含在请求头部中的token一起被调用。一旦用户退出，我们还需要清空sessionstorage中的数据。下面例子包含了一个退出函数，这个函数需要被添加到认证服务中。

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

总结

单页应用的认证方式和传统web应用的认证方式非常不同。由于主要的工作都搬到了浏览器端，用户的状态也需要存储在客户端。重要的一点是要记住用户的状态也需要的服务器端保存和进行验证，因为骇客很可能慧聪客户端窃取用户的数据。