AngularJs在驗證后將用戶數據保存到會話中

Question

我是AngularJS的新手，現在我正在嘗試用身份驗證構建我的第一個系統。 一切正常，除非用戶刷新頁面時，所有用戶信息都消失了......

我按照本教程：

http://www.sitepoint.com/implementing-authentication-angular-applications/

現在，這就是我傾向於確保用戶數據保持在原來的位置：

當用戶登錄時，我的API會以JSON格式返回他/她的詳細信息，然后將其放入$rootScope變量中以供在站點中使用，也可以在會話中使用。 接下來，我在rootscope中有一個變量，在登錄時返回true，而在不登錄時返回false，如下所示：

$rootScope.loggedin = true;
$rootScope.user = data;
$window.sessionStorage["info"] = data;
// console.log($window.sessionStorage["info"]);

這一切都發生在身份驗證工廠中。

然后，當用戶刷新，並且再次運行相同的工廠時，以下功能將開始工作：

function init() {
    if ($window.sessionStorage["info"]) {
        $rootScope.loggedin = true;
        $rootScope.user = $window.sessionStorage["info"];
        info = $window.sessionStorage["info"];
    }
}
init();

（我認為這樣可行，因為該文章和網上的其他各種來源都是這樣說的。）

然后在我的HTML中，我使用loggedin變量來確定用戶是否已登錄：

<div ng-show="!loggedin">
    <a href="/login" class="btn  btn-default btn-flat sidebar-toggle" style="position:relative;top:-3px; right: 5px;">Log in </a>
    <a class="btn btn-default btn-raised" style="background: #03A9F4; color:#fff; position:relative;top:-3px; right: 5px;">Registreer</a>
</div>

<div ng-show="loggedin">
    <ul class="nav navbar-nav">
        <li class="drop">

            <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">{{user.username}} <b class="caret"></b></a>
            <ul class="" style="z-index:99999999999;">
                <li><a href="javascript:void(0)">Some log-in only stuff</a></li>

            </ul>
        </li>
    </ul>
</div>

現在，當我自己登錄時，所有這些都很有效，但是當我刷新頁面時，它會檢測到我已登錄，但我的名字只是留空，因為我猜$rootScope.user是未定義的。

為什么會這樣，我該如何解決？

謝謝。

Answer 1

我建議您切換到類似於ngStorage的內容： https ： //github.com/gsklee/ngStorage

$ window.sessionStorage不會在新標簽頁或新窗口中保留，並且根據您的瀏覽器，甚至可能無法刷新頁面。 至少，你應該使用localStorage（不必像$ window / window的方法一樣調用它，除非你期望它在你的范圍內被覆蓋，順便說一下）。

此外，通常使用sessionStorage上的getter和setter方法（getItem和setItem）： https ： //developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage - 您可能無法使用object [“key”]語法實現了預期的效果，雖然我相信它們可以。

Answer 2

我寫了一個更清潔的對象來存儲本地存儲中的數據。

  var LocalStorageManager = {
    setValue: function(key, value) {
        window.localStorage.setItem(key, JSON.stringify(value));
    },
    getValue: function(key) {
        try {
            return JSON.parse(window.localStorage.getItem(key));
        } catch (e) {

        }
    }
};

要將數據保存到本地存儲：

LocalStorageManager.setValue("key",data);

要檢索該數據：

LocalStorageManager.getValue("key");