如何保持会议多页角的应用？ [英] How to keep session in multipage angular application?

问题描述

我有用户认证单页的应用和没有问题有共享会话信息。

I am having single page application with user authentication and there is no problem sharing session information there.

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

However I have part of site where are static pages where I would like just to include session information (logged in user, or login form). How I can share session information between two apps?

推荐答案

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

I would recommend creating a service that wraps localStorage or other apis to store persistent data. Here is an example using a localStorage implementation.

这实现的同步，但如果我会用的WebSQL 一样，甚至Server数据库，然后我会重构它使用的promises 返回存储对象。

This implementation is synchronous but if I would use websql like or even server db then I would refactor it to use promises to return the storage object.

控制器

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

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
        };
      };
    } ]);

这篇关于如何保持会议多页角的应用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！