Node.js 具有身份验证的Angular应用程序，仅在登录后提供文件服务

我想做的是有一个用于身份验证的登录页面（使用JWT与API通信），然后是棘手的部分，我只想在登录后加载Angular 2+中完成的网站的其余部分

我真的只希望登录后在客户端上提供文件（JS、CSS、HTML），这一点很重要，因为我不希望这些文件向WEB中的每个人公开。在节点角度应用程序中是否可以执行类似的操作？如果是，如何实施

如果Node不可能，那么angular（我想的是laravel）的其他技术也可以吗？

是的，“首页”是身份验证页面，在服务器句柄是身份验证之后，您只需为angular应用程序提供服务。这完全取决于主服务器的配置，以及它向用户显示的内容。由于已将其标记为express“/”路由将是身份验证页面，因此成功解析身份验证将重新发送该页面。我没用过angular，但我相信这是可能的

请参见本教程： 它显示了如何配置express服务器和angular服务器。你可能需要调整它一点，以适应你的需要，但它应该让你99%的方式

最糟糕的情况是，只需创建两个express应用程序实例（app=express）&&（app2=express），并让第二个实例在与第一个实例进行身份验证后开始提供文件（在单独的端口上）。这可能不漂亮，但这不是问题所在

使用AngularCLI

使用网页包查看邮政编码

ng构建--prod

将路由配置与简单的AuthGuard实现一起用于不需要的访问

{
路径：“”，
重定向至“主页”，
路径匹配：“已满”，
},
{
路径：“private”，
组件：FullLayoutComponent，
canActivate:[AuthGuard]//仅验证用户访问权限
}

AuthGuard.ts

---

在我之前的工作中，这就是流程：节点在登录后为所有文件提供服务

只需检查令牌是否有效（标头中的令牌），是否允许访问index.html，否则将用户重定向到登录页面

不要将登录页面包含到angular应用程序中。它可以是一个带有ajax调用（jQuery）的简单html文件，以便发送凭证。

---

如果凭据正常，则在成功响应中，将用户重定向到index.html，包括用于身份验证的标头中的令牌

将应用程序分解为模块并延迟加载已验证位。 在MainApp模块上设置登录页面，然后按如下方式设置路线：

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  }
  {
    path: 'app',
    component: MainAppComponent,
    children: [
        {
            path: 'protected-page',
            canActive: [AuthGuard],
            loadChildren: './protected-modul/protected.module#ProtectedModule'
        }
    ]
  }
 ];

---

为了保护Angular应用程序中的模块不被加载到浏览器中，您应该像这样使用

canLoad

guard：

path: 'customers',
canLoad: [AuthGuard],
loadChildren: 'app/customers/customers.module#CustomersModule'

其中

CustomersModule

是包含所有要“隐藏”的组件的NgModule。 此模块的代码将在块文件中分开，并且仅当

AuthGuard.canLoad

返回

true

时才会加载

---

您可以查看这个简单的应用程序，并在开发人员控制台中查看如何加载源代码的不同部分。github回购协议可以在这里找到

Tks为了得到答案，我更新了我的问题，因为它有点不完整。在尝试了几次之后，它不像我想象的那么容易。Angular似乎比express抢先一步。“Angular似乎抢先一步”？你指的是Angular 1.x还是angular2？是的，这当然是可能的，但不会非常简单。页面的登录逻辑通常相当复杂，这取决于您使用的登录技术。例如，如果您针对应用程序本身进行身份验证（与联邦身份验证相反），则需要收集并验证用户名/密码（例如，确保它不是空的，等等），然后通过某种post将其发送到服务器。根据你需要做什么样的验证，你可能可以用纯HTML5实现这一点，或者你可能需要一些非角度的javascript。另一方面，如果你使用的是联合身份解决方案，那么它可能非常简单。只要实现您的服务器，就可以将任何未经身份验证的请求（包括index.html的请求）重定向到您的身份提供商。因此，长话短说，如何做，以及需要做多少工作，将在很大程度上取决于您如何准确地验证您的用户。您正在使用OpenID连接吗？基本身份验证？表单post+cookies？自定义内容？对于身份验证，我想使用一个表单post，然后使用JWT在两个单独的“应用程序”上对web服务+1进行身份验证调用，其中一个仅用于登录目的，另一个用于实际应用程序，其中包含业务逻辑。@IsraGab我现在不使用Angular，但我想这就是我问题的答案。谢谢

path: 'customers',
canLoad: [AuthGuard],
loadChildren: 'app/customers/customers.module#CustomersModule'