Question

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

我真的只想在登录后在客户端上提供文件（JS，CSS，HTML），这很重要，因为我不希望这些文件暴露给WEB中的每个人。在Node Angular应用程序中可以这样做吗？如果是，它如何实施？

如果Node无法实现，是否可以使用其他技术与角度有关（我正在思考laravel）？

Answer 1

在我的先例工作中，流程是：节点在登录后提供所有文件。

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

不要将登录页面包含在角度应用中。它可以是一个带有ajax调用（jQuery）的简单html文件，以便发送凭据。如果凭据正常，则在成功响应中将用户重定向到index.html，包括用于身份验证的标头中的令牌

Answer 2

使用AngularCLI

使用WebPack输入代码

ng build --prod
使用带有简单AuthGuard实现的路由配置进行不必要的访问

{ path: '', redirectTo: 'home', pathMatch: 'full', }, { path: 'private', component: FullLayoutComponent, canActivate: [AuthGuard] // just auth users access }

AuthGuard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate() {
        if (localStorage.getItem('TOKEN')) {
            return true;
        }

        // not logged in so redirect to login page
        this.router.navigate('login');
        return false;
    }
}

Answer 3

为了保护Angular应用中的模块甚至无法加载到浏览器中，您应该像这样使用canLoad后卫：

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

其中CustomersModule是NgModule，包括您想隐藏的所有组件＆＃39;。此模块的代码将在块文件中分隔，并且仅在AuthGuard.canLoad返回true时才会加载。

您可以查看这个简单的应用https://solid-flow.github.io/secure-app/customers，并在开发控制台中查看源代码的不同部分是如何加载的。可以在https://github.com/solid-flow/secure-app

找到github repo

Answer 4

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

参见本教程： https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular 它显示了如何配置快速服务器和角度服务器。您可能需要根据自己的需要调整一下，但它应该可以让您获得99％的支持。

最糟糕的情况是只发2个快递应用程序（app = express）＆amp;＆amp; （app2 = express）并让第二个在使用第一个文件进行身份验证后开始提供文件（在单独的端口上）。它可能不是很漂亮，但这不是问题。：）

Answer 5

将您的应用分解为模块并延迟加载经过身份验证的位。在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 App仅在登录后提供文件

5 个答案:

AuthGuard.ts