node.js - NodeJS Express Angular 提供完全独立于 SPA 的登录页面

Question

我正在 Angular 8 中构建 SPA。我有一个多阶段 Docker 镜像，它运行 ng build 来构建发行版，然后使用一个简单的 Express 服务器来为应用程序提供服务。 (注意:后端 API 位于完全独立的 Express 服务器上。)

要求

我需要在 SPA“外部”设置一个登录页面。如果用户未经过身份验证，则必须显示登录页面，这样，在身份验证成功(通过检查授权 header 中的承载 token )之前，不会引导 SPA。

问题

我是否需要单独安装 Angular 来加载与应用程序其余部分分开的登录页面？或者，我是否应该跳过登录页面的 Angular，并使用 Pug 构建一个简单的快速页面，将 POST 发送到 API 进行身份验证？

注意:我正在寻求有关如何继续的一般建议，任何示例也会非常有帮助。

Dockerfile

### Dev, QA, and Production Docker servers ###

### Stage 1: Build ###
# Base image
FROM node:12 as builder

# Set working directory
RUN mkdir -p /home/angular/app
WORKDIR /home/angular/app

# Add `/home/angular/app/node_modules/.bin` to $PATH
ENV PATH /home/angular/app/node_modules/.bin:$PATH

# Install and cache app dependencies
COPY angular/package.json /home/angular/app/package.json
RUN npm install -g @angular/cli@8 \
  && npm install

# Add app
COPY ./angular /home/angular/app

# Generate build
RUN ng build --output-path=dist

### Stage 2: Server ###
FROM node:12

USER node

# Create working directory
RUN mkdir /home/node/app

## From 'builder' stage copy over the artifacts in dist folder
COPY --from=builder --chown=node /home/angular/app/dist /home/node/app/dist

# Copy Express server code to container
COPY --chown=node ./express /home/node/app

WORKDIR /home/node/app

RUN npm install

# Expose ports
EXPOSE 4201

CMD ["npm", "start"]

Angular SPA 的 Express 服务器 当 Dockerfile 执行其命令 CMD ["npm", "start"] 时，该服务器运行

const express = require('express');
const http = require('http');
const app = express();

// Set name of directory where angular distribution files are stored
const dist = 'dist';

// Set port
const port = process.env.PORT || 4201;

// Serve static assets
app.get('*.*', express.static(dist, { maxAge: '1y' }));

// Serve application paths
app.all('*', function (req, res) {
  res.status(200).sendFile(`/`, { root: dist });
});

// Create server to listen for connections
const server = http.createServer(app);
server.listen(port, () => console.log("Node Express server for " + app.name + " listening on port " + port));

Answer 1

Angular 支持同一项目下的多个应用程序。您可以使用以下命令创建单独的登录应用程序:

ng generate application <you-login-app-name-here>

这样您就可以只在“”中保留与登录相关的代码，而在主应用程序中保留其他代码。您可以使用以下命令单独构建、测试或运行这个新应用程序:

ng build <you-login-app-name-here>
ng test <you-login-app-name-here>
ng serve <you-login-app-name-here>

Angular 将在/dist/文件夹中生成构建输出，该输出可以映射到服务文件的快速路由。