使用 AngularJS 进行快速会话

Posted

技术标签:

【中文标题】使用 AngularJS 进行快速会话【英文标题】:Express sessions with AngularJS 【发布时间】:2013-08-15 17:01:57 【问题描述】:

我正在尝试使用 express 和 angularjs 创建一个简单的登录。 angular js 应用程序在单独的服务器(grunt 服务器 localhost:9000)上运行,而 express 应用程序在另一个端口上运行。对于我的快速应用程序,我设置了以下标头:

app.all('/*', function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "http://localhost:9000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
);

我正在运行 angular 1.0.7,这意味着我可以在配置步骤中设置一些默认值:

// Add COR ability
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

以及 $http 请求上的 withCredentials:

$http(
   method : "GET",
   withCredentials : true,
   url : apiEndpoint + '/session'
, success);

所以在使用我的应用程序登录后,会创建一个会话,并且可以在响应中看到一个 cookie。使用 chrome 调试工具,我可以看到连接会话 cookie 正在与下一个后续请求(上面的会话调用)一起发送。但是,在服务器上,req.session 属性仍然为空。当然,我可以使用 express 托管 angular 应用程序并解决所有这些问题,但我宁愿将两个项目/服务器分开。

这是 /session 请求的视图,连接会话 cookie 附加到请求:

【问题讨论】:

【参考方案1】:

所以,如果我的设置正确,你就有:

angularjs running on grunt server <---> express server

您想访问快速服务器上的会话吗? 如果是这种情况,那么您需要一种在这两个服务器之间共享会话的方法。 我建议使用 redis-connect 模块(还有 express-mongodb)。它将会话对象存储在可以从两个服务器访问的 redis 数据库中。 我以前从未使用过 grunt 服务器,但我使用两台 express 服务器完成了这项工作。 MemoryStore 在这里不起作用,因为您有两个不同的进程,它们不会共享相同的内存。

【讨论】:

感谢您的帮助。 Grunt 创建一个用于测试的服务器,但实际上它只是独立的 html、css 和 js 文件,没有应用程序服务器后端。我的目标是在快速服务器上创建一个会话,并在每个请求上继续发送connect.sid cookie 以识别会话。有什么想法吗?【参考方案2】:

我不得不弄乱一些不同的东西才能让它工作。首先,我升级到边缘角度,因为某些值无法在我需要的 $http 上全局默认。

在有角度的config() 步骤中,我添加了:

// Add COR ability
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

在 express 中,我创建了一个 angular 中间件:

exports.angularHeaders = function(req, res, next)
    res.header("Access-Control-Allow-Origin", 'insert your ui endpoint');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
;

【讨论】:

以上是关于使用 AngularJS 进行快速会话的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS的学习笔记

初识AngularJS

AngularJS ng-non-bindable 指令

从使用 AngularJS 开发的网站获取数据访问权限

[Anuglrjs]系列——学习与实践

angularjs 学习笔记