如何在多页角度应用程序中保持会话？(How to keep session in multipage angular application?)

如何在多页角度应用程序中保持会话？(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或其他apis来存储持久数据的服务。 这是一个使用localStorage实现的例子。

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

调节器

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

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

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.

Controller

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