如何在 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 中，否则，强制用户进入登录页面。