使用AngularJS在Session中存儲數據

Question

我正在通過創建一個小型應用程序來學習AngularJS。

成功登錄時，我將用戶信息存儲在sessionStorage中。

LoginController.JS

app.controller("LoginCntrl", function ($scope, $location, angularService) {

    $scope.Login = function () {
        var UserName = $scope.UserName;
        var Password = $scope.Password;

        var getData = angularService.LoginInformation(UserName,Password);
        getData.then(function (msg) {
            if (msg.data == '') {
                alert('no data');
            } else {
                sessionStorage.UserName = msg.dataUserName;
                $location.path('/members');
            }

        }, function (error) {
            alert('error in Login');
        });
    };
});

成功登錄后，我將用戶重定向到“ / memberList”，並且在memberlistCntrl控制器中，我正在檢查sessionStorage是否為空。 如果為空，那么我認為用戶正在嘗試不登錄而訪問該站點，而我正在將該用戶發送回“登錄”屏幕

memberlistCntrl中的代碼

app.controller("memberlistCntrl", function ($scope, $location, allMembers) {

    if (sessionStorage.length == 0)
    {
        $location.path('/login');
        return;
    }

    $scope.MembersList = allMembers.data;

    $scope.createmember = function (path) {
        $location.path(path);
    };
});

我的問題，

1. 這是檢查用戶是否登錄的正確方法嗎？
2. sessionStorage是將數據存儲在“會話”中的正確對象，以便我可以通過我的所有頁面或站點進行訪問嗎？
3. 有沒有更好的方法可以實現相同目的？

Answer 1

我的問題，

• 這是檢查用戶是否登錄的正確方法嗎？
• sessionStorage是將數據存儲在“會話”中的正確對象，以便我可以通過我的所有頁面或站點進行訪問嗎？

好吧，這取決於您的用例。 頁面會話結束時，會清除sessionStorage 。 頁面會話的持續時間只要瀏覽器處於打開狀態，並且在頁面重新加載和還原后仍然存在。 在新標簽或窗口中打開頁面將導致啟動新會話。

因此，如果您希望用戶在打開另一個tab注銷，則可以繼續使用sessionStorgae。 但是，在大多數站點中並不是這樣（在“另一個選項卡”中打開問題時，您是否從stackoverflow中注銷？）。

• 有沒有 更好的 其他方法可以實現相同目的？

是。 您可以使用localStorage或cookie 。 Stackoverflow將此信息保存在名為usr的cookie中。

如果使用chrome，請打開控制台（F12）。

轉到資源> Cookies並刪除usr 。 刷新頁面，您將被注銷。

Gmail，facebook使用類似的技術。

現在，AngularJS提供了$ cookies服務來獲取/設置或刪除cookie。

與localStorage對象相比，首選cookies來跟蹤登錄狀態的原因是：cookie隨每個請求/響應周期傳遞到服務器，因此可以在服務器端使用。 如果未獲得特定請求所需的cookie，則只需引發狀態401（未授權）消息。

Answer 2

Angular支持$ cookieStore來存儲您的值。 請參考下面的例子 。

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);

Refreence： https ://docs.angularjs.org/api/ngCookies/service/ $ cookieStore

或-編輯：

如果要使用sessionStorage進行數據存儲，則需要使用$ window.sessionStorage。 讓我為您推薦一個例子。

<a href="javascript:void(0)" ng-click="addItem('111')">Add item in session</a>

$scope.addItem = function(item){
    $window.sessionStorage.setItem(id,item);
}

Answer 3

我假設您不想違反DRY原理，並復制並粘貼檢查每個控制器中的身份驗證的代碼

if (sessionStorage.length == 0)
{
    $location.path('/login');
    return;
}

而是嘗試在一個地方使用$routeChangeStart來防止用戶未經身份驗證而轉到頁面。

如何實現此目的的示例： http : //fdietz.github.io/recipes-with-angular-js/urls-routing-and-partials/listening-on-route-changes-to-implement-a-login-mechanism html的