如何在 AngularJS 中存储用户会话？答案

【问题标题】：How to store user session in AngularJS?如何在 AngularJS 中存储用户会话？
【发布时间】：2020-05-10 03:33:11
【问题描述】：

我刚刚开始使用 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，但这对我来说不行。我想创建自己的简单身份验证。

【问题讨论】：

stackoverflow.com/questions/23640476/…的可能重复

标签： javascript angularjs authentication session cookies

【解决方案1】：

你可以使用

ngStorage

一个 AngularJS 模块，使 Web 存储以 Angular 方式工作。包含两个服务：$localStorage 和 $sessionStorage。

与其他实现的区别

没有Getter 'n' Setter 废话 - 来自 AngularJS 主页：“与其他框架不同，没有需要 [...] 将模型包装在访问器方法中。只是简单的旧 JavaScript here.” 现在您可以在实现的同时享受同样的好处使用 Web Storage 实现数据持久化。

sessionStorage - 我们为这个经常被忽视的伙伴提供了保障。

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

无 Cookie 回退 - 网络存储随时可用 AngularJS 官方支持的浏览器，这样的回退很大程度上是多余的。

一个示例如下所示

Working Demo

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

【讨论】：

我认为它更容易受到 XSS 攻击

【解决方案2】：

$rootScope 总是会在页面刷新时重置，因为它是一个单页应用程序。

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

记住，敏感的会话信息应该被加密。

【讨论】：

我可以将$cookieStore 用于身份验证系统吗？
我认为$cookieStore 可以让它工作。谢谢安德鲁。
是的，我过去使用过 $cookieStore。

【解决方案3】：

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

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

【讨论】：