Приложение Angular использует экспресс-сеанс для аутентификации как порта 3000, так и порта 4200 - PullRequest
Новая
       8

Приложение Angular использует экспресс-сеанс для аутентификации как порта 3000, так и порта 4200

0 голосов
/ 13 февраля 2019

Используя angular-cli для разработки angular,

ng serve на порте 4200 node server.js на порте 3000

Я хочу войти, используя страницу экспресс-входа.

Поскольку cookie и сеанс зависят от домена.Поскольку порты разные, я могу войти через порт 3000 на экспресс-странице, так как все входы выполняются на экспресс-странице.

Как я могу использовать угловое приложение?

Expressjs не сможет получать в приложении и сессию, и cookie через XHR.

Так что посещение одного и того же localhost:3000/api/user route

В угловом режиме это 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();
});

На самом деле, по крайней мере, кто-то может сказать мнеможет ли общий домен (порт) вообще работать с таким подходом?

1 Ответ

0 голосов
/ 13 февраля 2019

Вы запускаете Angular CLI сервер на 4200 (только) для разработки.И если вы хотите подключиться к порту 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"

Или там, где находится ваш экспресс-статический каталог.

...