Question

我是AngularJS的新手，现在我正在尝试使用身份验证来构建我的第一个系统。一切正常，除非用户刷新页面时，所有用户信息都消失了......

我遵循了本教程：

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

现在我倾向于确保用户数据保持原样：

当用户登录时，我的API会以JSON格式返回他/她的详细信息，然后将其放入$rootScope变量以供在站点中使用，也可以放入会话中。接下来，我在rootcope中有一个变量，在登录时返回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 - 您可能无法使用该对象[“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");

AngularJs在验证后将用户数据保存到会话中

2 个答案: