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。

与其他实施的差异

No Getter'n'Setter Bullshit -   来自AngularJS主页：“与其他框架不同，没有   需要在访问器方法中包装模型。只是简单的老   这里是JavaScript。“现在，您可以在实现目标的同时享受同样的好处   Web存储的数据持久性。

sessionStorage - 我们得到了这个经常被忽视的好友。

干净编写的代码 - 以Angular方式编写，结构合理   考虑到可测试性。

没有Cookie回退 - 随着Web存储随时可用   AngularJS官方支持的浏览器，这种后备很大程度上   多余的。

示例示例如下所示

<强> Working Demo

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

Answer 2

页面刷新后，

$rootScope将始终重置，因为它是单页应用。

您需要使用持久存在客户端的东西，例如cookie或sessionStorage（因为它们都有到期时间）。请查看$cookieStore的文档：https://docs.angularjs.org/api/ngCookies/service/$cookieStore

请记住，敏感会话信息应加密。

Answer 3

您需要在服务器上创建一个api来收集当前用户。此api必须返回与登录后相同的用户对象。

对于要在$ routeProvider中保护的每个$ route.path，使用ng-init在控制器中调用此api。如果api返回一个对象，则将该对象添加到$ rootScope，否则，强制用户进入登录页面。

如何在Angular中存储用户会话？

3 个答案:

ngStorage