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

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 Storage实现数据持久性的同时享受相同的优势.

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

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

没有Cookie后备 - 随着Web存储在AngularJS正式支持的所有浏览器中都可用,这种后备在很大程度上是多余的.

示例示例如下所示

工作演示

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,否则,强制用户进入登录页面.