如何在 AngularJS 中存儲用戶會話？

Question

我剛剛開始使用 AngularJS，我正在嘗試在我的 AngularApp 上存儲用戶會話。

提交用戶名和密碼的第一步工作。 之后，我將從服務中檢索到的username存儲在$rootScope 。 下一頁可以顯示存儲的username 。

但是刷新后， $rootScope是空的。

我正在嘗試做一個盡可能簡單的身份驗證系統。

myApp.controller('loginController', ['$scope', '$rootScope', '$location', 'AuthService', '$route',
  function ($scope, $rootScope, $location, AuthService, $route) {

      $scope.login = function (credentials) {
        AuthService.login(credentials).then(function (response) {
          if(response.data == "0"){
            alert("Identifiant ou mot de passe incorrect");
          }
          else {
            // response.data is the JSON below 
            $rootScope.credentials = response.data;           
            $location.path("/");
          }
        });
      };

}]);

AuthService.login()發出$http請求。

JSON

 {user_id: 1, user_name: "u1", user_display_name: "Steffi"} 

HTML :

 <div>Welcome {{ credentials.user_display_name }}!</div>

我嘗試了很多教程，但我無法使會話工作。 我已經使用過 UserApp，但對我來說不太好。 我想創建自己的簡單身份驗證。

Answer 1

您可以使用

ngStorage

一個 AngularJS 模塊，使 Web 存儲以 Angular 方式工作。 包含兩個服務：$localStorage 和 $sessionStorage。

與其他實現的區別

沒有 Getter 'n' Setter Bullshit - 來自 AngularJS 主頁：“與其他框架不同，不需要 [...] 將模型包裝在訪問器方法中。這里只是普通的舊 JavaScript。” 現在，您可以在使用 Web Storage 實現數據持久性的同時享受同樣的好處。

sessionStorage - 我們得到了這個經常被忽視的伙伴。

干凈編寫的代碼- 以 Angular 方式編寫，結構良好，並考慮到可測試性。

無 Cookie 回退- 由於 Web 存儲在 AngularJS 正式支持的所有瀏覽器中都可用，因此這種回退在很大程度上是多余的。

示例示例如下所示

工作演示

var eS = angular.module('exampleStore', ['localStorage']);

Answer 2

$rootScope將在頁面刷新時始終重置，因為它是一個單頁面應用程序。

您需要使用客戶端持久化的東西，例如 cookie 或 sessionStorage（因為它們都有一個過期時間）。 查看$cookieStore的文檔： https : $cookieStore

請記住，敏感的會話信息應該被加密。

Answer 3

您需要在您的服務器上創建一個 api 來收集當前用戶。 這個 api 必須返回與您登錄后的用戶對象相同的用戶對象。

對於您想要在 $routeProvider 中保護的每個 $route.path，請使用 ng-init 在控制器中調用此 api。 如果 api 返回一個對象，則將該對象添加到您的 $rootScope 中，否則，強制用戶進入登錄頁面。