保护基于react / react-router的单页面应用程序

Question

我一直在使用React和React-Router组合一个单页应用程序，但我似乎不明白如何保护这些应用程序。

我发现一篇不错的清晰博客文章显示了一种方法，但对我而言似乎并不安全。基本上，该文章中介绍的方法是限制用户无权访问的组件的呈现。作者多写了几篇文章，它们是该思想的变体，将其扩展到了React-Router路由和其他组件，但是在他们心中，所有这些方法似乎都依赖于同一有缺陷的思想：客户端代码决定要做什么基于组成组件时存储中的数据。对我来说，这似乎是一个问题-怎样才能阻止一个进取的黑客弄乱代码来访问东西？

我想到了三种不同的方法，但我都不满意：

1. 我当然可以编写授权代码，使得客户端代码不断地与服务器检查授权，但这似乎很浪费。

2. 我可以设置应用程序，以便仅在服务器确认客户端有权访问该代码之后，才将模块从服务器推送到客户端。但这似乎涉及将我的代码分解成一百万个小模块，而不是一个漂亮的整体式捆绑包（我正在使用browserify）。

3. 某些服务器端呈现系统可能会起作用，这将确保用户只能看到服务器已决定有权查看的页面。但这似乎很复杂，而且似乎也向后退了一步（如果我想让服务器完成所有工作，则可以编写传统的Web应用程序）。

那么，最好的方法是什么？别人如何解决这个问题？

Answer 1

如果您试图保护代码本身，那么将该代码发送到客户端或发送能够加载该代码的代码的任何方法似乎都是问题。因此，即使是采用代码拆分的传统简单方法，在这里也可能会出现问题，因为它们会显示捆绑包的文件名。您可以通过在服务器上要求一个cookie来保护它，但这似乎很麻烦。

如果您的应用程序要求对未授权用户隐藏内部代码，则建议将其拆分为两个具有单独捆绑软件的独立应用程序。从一个到另一个将需要一个单独的请求，但这似乎与您要完成的工作是一致的。