關(guān)鍵要點(diǎn)

• 在單頁(yè)應(yīng)用程序 (SPA) 中實(shí)現(xiàn)身份驗(yàn)證涉及服務(wù)器公開(kāi)身份驗(yàn)證端點(diǎn)，該端點(diǎn)驗(yàn)證用戶(hù)憑據(jù)並返回訪問(wèn)令牌。此令牌隨後用於對(duì)服務(wù)器進(jìn)行的所有安全 API 請(qǐng)求。
• 在 Angular 中，訪問(wèn)令牌可以存儲(chǔ)在服務(wù)或值中，因?yàn)樗鼈兪强蛻?hù)端上的單例對(duì)象。但是，為了防止用戶(hù)刷新頁(yè)面時(shí)令牌丟失，建議使用瀏覽器持久性機(jī)制（例如 sessionStorage）來(lái)存儲(chǔ)令牌。
• 為了防止?jié)撛诘臄?shù)據(jù)盜竊，應(yīng)在服務(wù)器端和客戶(hù)端維護(hù)和驗(yàn)證用戶(hù)的狀態(tài)。當(dāng)用戶(hù)註銷(xiāo)時(shí)，應(yīng)調(diào)用相應(yīng)的 API（請(qǐng)求標(biāo)頭中包含訪問(wèn)令牌），並且還應(yīng)清除 sessionStorage 中的數(shù)據(jù)。

身份驗(yàn)證和授權(quán)是幾乎所有嚴(yán)肅應(yīng)用程序的重要組成部分。單頁(yè)應(yīng)用程序 (SPA) 也不例外。應(yīng)用程序可能不會(huì)將其所有數(shù)據(jù)和功能都公開(kāi)給任何用戶(hù)。用戶(hù)可能必須進(jìn)行身份驗(yàn)證才能查看應(yīng)用程序的某些部分，或在應(yīng)用程序上執(zhí)行某些操作。為了識(shí)別應(yīng)用程序中的用戶(hù)，我們需要讓用戶(hù)登錄。

在傳統(tǒng)的服務(wù)器驅(qū)動(dòng)應(yīng)用程序和單頁(yè)應(yīng)用程序中，用戶(hù)管理的實(shí)現(xiàn)方式有所不同。 SPA 與其服務(wù)器組件交互的唯一方式是通過(guò) AJAX。即使對(duì)於登錄和註銷(xiāo)也是如此。

負(fù)責(zé)識(shí)別用戶(hù)的服務(wù)器必須公開(kāi)身份驗(yàn)證端點(diǎn)。 SPA 將把用戶(hù)輸入的憑據(jù)發(fā)送到此端點(diǎn)進(jìn)行驗(yàn)證。在典型的基於令牌的身份驗(yàn)證系統(tǒng)中，服務(wù)在驗(yàn)證憑據(jù)後可能會(huì)返回訪問(wèn)令牌或包含已登錄用戶(hù)的名稱(chēng)和角色的對(duì)象?？蛻?hù)端必須在對(duì)服務(wù)器進(jìn)行的所有安全 API 請(qǐng)求中使用此訪問(wèn)令牌。

由於訪問(wèn)令牌將被多次使用，因此最好將其存儲(chǔ)在客戶(hù)端。在 Angular 中，我們可以將值存儲(chǔ)在服務(wù)或值中，因?yàn)樗鼈兪强蛻?hù)端上的單例對(duì)象。但是，如果用戶(hù)刷新頁(yè)面，服務(wù)或值中的值將丟失。在這種情況下，最好使用瀏覽器提供的持久性機(jī)制之一來(lái)存儲(chǔ)令牌；最好是 sessionStorage，因?yàn)樗跒g覽器關(guān)閉後會(huì)被清除。

實(shí)現(xiàn)登錄

現(xiàn)在讓我們來(lái)看一些代碼。假設(shè)我們已經(jīng)實(shí)現(xiàn)了所有服務(wù)器端邏輯，並且服務(wù)在 /api/login 處公開(kāi)了一個(gè) REST 端點(diǎn)來(lái)檢查登錄憑據(jù)並返回訪問(wèn)令牌。讓我們編寫(xiě)一個(gè)簡(jiǎn)單的服務(wù)，通過(guò)訪問(wèn)身份驗(yàn)證端點(diǎn)來(lái)執(zhí)行登錄操作。稍後我們將向此服務(wù)添加更多功能：

app.factory("authenticationSvc", function($http, $q, $window) {
  var userInfo;

  function login(userName, password) {
    var deferred = $q.defer();

    $http.post("/api/login", {
      userName: userName,
      password: password
    }).then(function(result) {
      userInfo = {
        accessToken: result.data.access_token,
        userName: result.data.userName
      };
      $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
      deferred.resolve(userInfo);
    }, function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  }

  return {
    login: login
  };
});

在實(shí)際代碼中，您可能希望將存儲(chǔ)數(shù)據(jù)到 sessionStorage 的語(yǔ)句重構(gòu)到單獨(dú)的服務(wù)中，因?yàn)槿绻覀冞@樣做，此服務(wù)將承擔(dān)多個(gè)責(zé)任。為了使演示保持簡(jiǎn)單，我將其保留在同一個(gè)服務(wù)中。此服務(wù)可以由處理應(yīng)用程序登錄功能的控制器使用。

保護(hù)路由

我們可能在應(yīng)用程序中有一組受保護(hù)的路由。如果用戶(hù)未登錄並嘗試進(jìn)入這些路由之一，則應(yīng)將用戶(hù)定向到登錄頁(yè)面。這可以使用路由選項(xiàng)中的 resolve 塊來(lái)實(shí)現(xiàn)。以下代碼片段說(shuō)明了實(shí)現(xiàn)方法：

$routeProvider.when("/", {
  templateUrl: "templates/home.html",
  controller: "HomeController",
  resolve: {
    auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();

      if (userInfo) {
        return $q.when(userInfo);
      } else {
        return $q.reject({ authenticated: false });
      }
    }]
  }
});

resolve 塊可以包含多個(gè)語(yǔ)句塊，這些語(yǔ)句塊必須在完成時(shí)返回 promise 對(duì)象。只是為了澄清，上面定義的名稱(chēng) auth 不是由框架定義的；我定義了它。您可以根據(jù)用例將名稱(chēng)更改為任何名稱(chēng)。

有多種原因會(huì)導(dǎo)致傳遞或拒絕路由。根據(jù)場(chǎng)景，您可以在解析/拒絕 promise 時(shí)傳遞對(duì)象。我們尚未在服務(wù)中實(shí)現(xiàn) getLoggedInUser() 方法。這是一個(gè)簡(jiǎn)單的方法，它從服務(wù)返回 loggedInUser 對(duì)象。

app.factory("authenticationSvc", function() {
  var userInfo;

  function getUserInfo() {
    return userInfo;
  }
});

通過(guò)上述代碼片段中 promise 發(fā)送的對(duì)象通過(guò) $rootScope 廣播。如果路由已解析，則會(huì)廣播事件 $routeChangeSuccess。但是，如果路由失敗，則會(huì)廣播事件 $routeChangeError。我們可以監(jiān)聽(tīng) $routeChangeError 事件並將用戶(hù)重定向到登錄頁(yè)面。由於事件位於 $rootScope 級(jí)別，因此最好在運(yùn)行塊中附加事件處理程序。

app.run(["$rootScope", "$location", function($rootScope, $location) {
  $rootScope.$on("$routeChangeSuccess", function(userInfo) {
    console.log(userInfo);
  });

  $rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) {
    if (eventObj.authenticated === false) {
      $location.path("/login");
    }
  });
}]);

處理頁(yè)面刷新

當(dāng)用戶(hù)點(diǎn)擊頁(yè)面的刷新按鈕時(shí)，服務(wù)會(huì)丟失其狀態(tài)。我們必須從瀏覽器的 sessionStorage 獲取數(shù)據(jù)並將其分配給變量 loggedInUser。由於工廠只調(diào)用一次，因此我們可以在初始化函數(shù)中設(shè)置此變量，如下所示。

function init() {
  if ($window.sessionStorage["userInfo"]) {
    userInfo = JSON.parse($window.sessionStorage["userInfo"]);
  }
}

init();

註銷(xiāo)

當(dāng)用戶(hù)從應(yīng)用程序註銷(xiāo)時(shí)，必須調(diào)用相應(yīng)的 API，並在請(qǐng)求標(biāo)頭中包含訪問(wèn)令牌。用戶(hù)註銷(xiāo)後，我們也應(yīng)該清除 sessionStorage 中的數(shù)據(jù)。以下示例包含必須添加到身份驗(yàn)證服務(wù)的註銷(xiāo)函數(shù)。

function logout() {
  var deferred = $q.defer();

  $http({
    method: "POST",
    url: logoutUrl,
    headers: {
      "access_token": userInfo.accessToken
    }
  }).then(function(result) {
    $window.sessionStorage["userInfo"] = null;
    userInfo = null;
    deferred.resolve(result);
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
}

結(jié)論

在單頁(yè)應(yīng)用程序中實(shí)現(xiàn)身份驗(yàn)證的方法與傳統(tǒng) Web 應(yīng)用程序的方法大相徑庭。由於大部分工作是在客戶(hù)端進(jìn)行的，因此用戶(hù)的狀態(tài)也必須存儲(chǔ)在客戶(hù)端的某個(gè)位置。重要的是要記住，也必須在服務(wù)器端維護(hù)和驗(yàn)證狀態(tài)，因?yàn)楹诳涂赡軙?huì)竊取存儲(chǔ)在客戶(hù)端系統(tǒng)上的數(shù)據(jù)。

本文中的源代碼可在 GitHub 上下載。

關(guān)於在 Angular 應(yīng)用程序中實(shí)現(xiàn)身份驗(yàn)證的常見(jiàn)問(wèn)題解答

如何在 Angular 中使用 withCredentials 屬性？

withCredentials 屬性用於在 HTTP 請(qǐng)求中包含身份驗(yàn)證 cookie。在 Angular 中，您可以在 HttpClient 模塊中使用它。發(fā)出請(qǐng)求時(shí)，您可以將 withCredentials 屬性設(shè)置為 true。這是一個(gè)示例：

this.http.get(url, { withCredentials: true }).subscribe(...);

這將包含服務(wù)器之前可能已發(fā)送的任何 cookie。

Angular 中 HttpInterceptor 的用途是什麼？

HttpInterceptor 是 Angular 中的一項(xiàng)功能，允許您在將 HTTP 請(qǐng)求發(fā)送到服務(wù)器之前全局?jǐn)r截和修改它們。它對(duì)於各種任務(wù)非常有用，例如向所有請(qǐng)求添加身份驗(yàn)證令牌或全局處理錯(cuò)誤。

如何創(chuàng)建自定義 HttpInterceptor 來(lái)處理 withCredentials？

要?jiǎng)?chuàng)建自定義 HttpInterceptor，您需要?jiǎng)?chuàng)建一個(gè)實(shí)現(xiàn) HttpInterceptor 接口的服務(wù)。這是一個(gè)示例：

app.factory("authenticationSvc", function($http, $q, $window) {
  var userInfo;

  function login(userName, password) {
    var deferred = $q.defer();

    $http.post("/api/login", {
      userName: userName,
      password: password
    }).then(function(result) {
      userInfo = {
        accessToken: result.data.access_token,
        userName: result.data.userName
      };
      $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
      deferred.resolve(userInfo);
    }, function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  }

  return {
    login: login
  };
});

此攔截器將克隆每個(gè)請(qǐng)求並將 withCredentials 屬性設(shè)置為 true。

為什麼在使用 withCredentials 時(shí)會(huì)收到 CORS 錯(cuò)誤？

CORS（跨源資源共享）是一項(xiàng)安全功能，它限制了跨域共享資源的方式。如果您收到 CORS 錯(cuò)誤，則表示服務(wù)器未配置為接受來(lái)自您域的請(qǐng)求。要解決此問(wèn)題，您需要將服務(wù)器配置為在“Access-Control-Allow-Origin”標(biāo)頭中包含您的域，並將“Access-Control-Allow-Credentials”設(shè)置為 true。

如何使用 XMLHttpRequest withCredentials 屬性？

XMLHttpRequest withCredentials 屬性的工作方式與 Angular HttpClient withCredentials 屬性類(lèi)似。它用於在請(qǐng)求中包含 cookie。這是一個(gè)示例：

$routeProvider.when("/", {
  templateUrl: "templates/home.html",
  controller: "HomeController",
  resolve: {
    auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();

      if (userInfo) {
        return $q.when(userInfo);
      } else {
        return $q.reject({ authenticated: false });
      }
    }]
  }
});

這將發(fā)送包含 cookie 的 GET 請(qǐng)求到指定的 URL。

其餘的常見(jiàn)問(wèn)題解答與HttpClientModule 的使用有關(guān)，與文章的核心主題（Angular 中的身份驗(yàn)證實(shí)現(xiàn)）關(guān)係不大，因此在此處省略。 這些問(wèn)題可以很容易地通過(guò)搜索引擎找到答案。

以上是在角度應(yīng)用中實(shí)施身份驗(yàn)證的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！