如何在多页面的Angular应用程序中保持会话？

Question

如何在多页面的Angular应用程序中保持会话？

sessionangularjs

4

我有一个单页应用程序，具有用户身份验证功能，并且在此处共享会话信息没有问题。

但是我有一部分网站是静态页面，在那里我只想包含会话信息（已登录的用户或登录表单）。我如何在两个应用程序之间共享会话信息？

- ajevic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Liviu T. · Accepted Answer

我建议创建一个服务，包装 localStorage 或其他API来存储持久数据。这里是使用 localStorage 实现的示例。

这个实现是同步的，但如果我使用像websql或者服务器数据库，那么我会重构它来使用promises返回存储对象。

控制器

var demo = angular.module('demo', [ 'appStorage' ]);

demo.controller('AppStorageController', [ '$scope', 'appStorage',
    function($scope, appStorage) {
      appStorage('MyAppStorage', 'myAppStorage', $scope);
    } ]);

HTML

<div ng-controller="AppStorageController">
  <p>Local Storage: {{myAppStorage}}</p>
  <p>
    Username: <input type="text" ng-model="myAppStorage.username"></input>
  </p>
  <p>
    Remember me: <input type="checkbox"
      ng-model="myAppStorage.rememberMe"></input>
  </p>
</div>

JS

：JavaScript

angular.module('appStorage', []).factory('appStorage',
    [ '$window', function($window) {
      var appStorages = {};
      var api = undefined;

      if ($window.localStorage) {
        api = {
          set : function(name, value) {
            $window.localStorage.setItem(name, JSON.stringify(value));
          },
          get : function(name) {
            var str = $window.localStorage.getItem(name);
            var val = {};
            try {
              val = str ? JSON.parse(str) : {};
            }
            catch (e) {
              console.log('Parse error for localStorage ' + name);
            }
            return val;
          },
          clear : function() {
            $window.localStorage.clear();
          }
        };
      }
      // possibly support other

      if (!api) {
        throw new Error('Could not find suitable storage');
      }

      return function(appName, property, scope) {
        if (appName === undefined) {
          throw new Error('appName is required');
        }

        var appStorage = appStorages[appName];

        var update = function() {
          api.set(appName, appStorage);
        };

        var clear = function() {
          api.clear(appName);
        };

        if (!appStorage) {
          appStorage = api.get(appName);
          appStorages[appName] = appStorage;
          update();
        }

        var bind = function(property, scope) {
          scope[property] = appStorage;
          scope.$watch(property, function() {
            update();
          }, true);
        };

        if (property !== undefined && scope !== undefined) {
          bind(property, scope);
        }

        return {
          get : function(name) {
            return appStorage[name];
          },
          set : function(name, value) {
            appStorage[name] = value;
            update();
          },
          clear : clear
        };
      };
    } ]);