Angular 应用程序使用 express-session 对端口 3000 和端口 4200 进行身份验证答案

【问题标题】：Angular app uses express-session to authenticate both port 3000 and port 4200Angular 应用程序使用 express-session 对端口 3000 和端口 4200 进行身份验证
【发布时间】：2019-07-06 21:06:47
【问题描述】：

使用angular-cli开发angular，

ng serve 在端口 4200 node server.js 在 3000 端口上

我想使用快速登录页面登录。

因为 cookie 和会话是特定于域的。由于端口不同，我可以在 express 页面上通过端口 3000 登录自己，因为所有登录都是在 express 端完成的。

如何使用 Angular 应用程序？

Expressjs 将无法在应用中通过 XHR 接收会话和 cookie。

所以访问相同的localhost:3000/api/user路线

在 Angular 内，它的 XHR 命中呈现 302 重定向，就像未登录用户一样但是直接访问它是200。

app.use(session({
    secret: 'somerandonstuffs',
    resave: true,
    saveUninitialized: false,
    cookie: { maxAge: 60 * 1000, httpOnly: true }
}));

const authUser = (req, res, next) => {
    if (req.session.user && req.cookies['connect.sid']) {
        next();
    } else {
        res.redirect(config.serverHost + '/login');
    }
};

app.route('/login')
    .get((req, res) => {
        res.sendFile(__dirname + '/views/login.html');
    })
    .post((req, res) => {
            req.session.user = {
                id: 'x@x.x'
            };
            res.redirect(config.clientHost);
        }
    });

app.all('/*', authUser, function (req, res, next) {
    next();
});

实际上，至少有人可以告诉我共享域（端口）是否可以使用这种方法？

【问题讨论】：

标签： node.js angular express session express-session

【解决方案1】：

您在 4200（仅）上运行 Angular CLI 服务器进行开发。如果您想访问端口 3000 api，请使用代理配置：

在 angular.json 中：

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "cleanup:build",
        "proxyConfig": "proxy.conf.json"
      },

并在 proxy.conf.json 中定义重定向：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

现在在常规模式下，您使用相同的快速服务器来提供 Angular。

   "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "../express/webapp"

或者你的 express 静态目录在哪里。

【讨论】：

谢谢！近乎完美！当我尝试访问 3000 时，它成功重定向到登录页面。但是如果我访问 4200，我无法将其重定向。