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

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是安全的，所以如果他们进入用户界面，他们将无法访问无论如何API的数据，但我没有在Facebook的公共包中看到管理按钮/代码。

Answer 1

有没有办法在服务器端专门渲染一些东西，并且在服务器端渲染之后引导时，不要让HTML / JS滑入前端

是。

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

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

您可以在前端版本中定义虚假代理服务，但使用服务器端提供程序仅声明仅存在于服务器上的服务。这可以防止源代码进入捆绑包。

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

然后，您需要创建一个server.ts，根据安全检查选择要引导的构建。如果您使用cookie或其他任何纯粹的不同问题，您如何执行此检查。

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

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
    ]
  });
});

您可以在此代码块中添加构建到引导程序的逻辑。

拼图的各个部分可以实现您想要的安全性。我无法提供关于如何做到这一点的完整教程，但我希望我已经指出了正确的方向。