Question

我正在使用Angular 7启动一个项目，我想知道什么是基于权限向用户隐藏“受保护” HTML元素的最佳方法。我知道最简单的方法是使用像CASL这样的库来处理它们，但是我想要真正的权限/角色访问检查。

如果用户不应该看到按钮，则根本不应该呈现按钮，我知道ngIf和ngShow，即使它无法进入HTML，它也会出现在缩小的bundle.js中。

我的方法是使用Angular Universal并使用isPlatformBrowser和isPlatformServer进行一些测试，但我发现即使我使用了以下内容，当客户端中的Angular引导程序出现时，捆绑包中仍会包含代码：

<ng-container *ngIf="isPlatformServerFunction() && hasAccess()"> <button> Secret Button </button> <ng-container>

¿是否有一种方法可以完全在服务器端进行渲染，并且在服务器端渲染后进行引导时，不要让HTML / JS滑入前端？

我想知道在诸如Facebook之类的大型应用程序中如何处理此问题，因为每个人都说它应该在前端，因为后端API是安全的，因此如果它们进入UI，他们将不会这样做。无论如何都无法获取API的数据，但我在Facebook的公共捆绑包中看不到管理按钮/代码。

Answer 1

有没有一种方法可以专门渲染服务器端的内容，并且在服务器端渲染后进行引导时，不要让HTML / JS进入前端

是的

您必须为Angular项目构建两个不同的版本。一个包含 private 内容，另一个包含 public 。这可以通过为Angular项目定义多个环境来完成。

https://blog.angularindepth.com/becoming-an-angular-environmentalist-45a48f7c20d8

您可以在前端构建中定义伪造的代理服务，但使用服务器端提供程序仅声明仅在服务器上存在的服务。这样可以防止源代码进入捆绑软件。

app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule,
  providers: [
    ServerService
  ]
}));

然后，您需要创建一个server.ts，用于根据 security 检查选择要引导到 bootstrap 的版本。如果您使用Cookie或其他完全不同的问题，则如何执行此检查。

这是通过按每个请求而不是app.engine()引导Angular服务器端呈现来完成的。

https://github.com/angular/universal/tree/master/modules/express-engine#advanced-usage

app.get('/**/*', (req: Request, res: Response) => {
  res.render('../dist/index', {
    req,
    res,
    bootstrap: OtherServerAppModule,
    providers: [
      OtherServerService
    ]
  });
});

正是在此代码块中，将其构建的 logic 添加到引导程序。

难题的存在可帮助您实现所需的安全性。我无法提供有关具体操作方法的完整教程，但希望我已为您指明了正确的方向。

如何在客户端隐藏服务器端呈现的HTML代码

1 个答案: