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

Question

我一直在使用React和React-Router整理单页应用程序，我似乎无法理解如何保护这些应用程序。

我找到了一个很好的清晰的博客文章 ，显示了一种方法，但它对我来说看起来并不安全。 基本上，该帖子中提出的方法是限制用户未被授权访问的组件的呈现。 作者写了几篇关于这个想法的变化的帖子，将它扩展到React-Router路由和其他组件，但是在他们心中所有这些方法似乎都依赖于同样有缺陷的想法：客户端代码决定做什么基于组件组成时商店中的数据。 这对我来说似乎是一个问题 - 什么是阻止一个有进取心的黑客搞乱代码来获取东西？

我想到了三种不同的方法，其中没有一种我很满意：

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

2. 我可以设置应用程序，以便只有在服务器验证了客户端有权访问该代码之后，模块才会从服务器推送到客户端。 但这似乎涉及将我的代码分解成一百万个小模块而不是一个漂亮的单片软件包（我正在使用browserify）。

3. 某些服务器端呈现系统可能会起作用，这将确保用户只能看到服务器已决定他们有权查看的页面。 但这看起来很复杂，似乎又向后退了一步（如果我希望服务器能够做任何事情，我可以写一个传统的网络应用程序）。

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

Answer 1

如果您试图保护代码本身 ，似乎任何将该代码发送到客户端或发送能够加载该代码的代码的方法都会成为问题。 因此，即使是传统的简单方法与代码分割也可能存在问题，因为它们揭示了包的文件名。 你可以通过在服务器上要求一个cookie来保护它，但这似乎有点大惊小怪。

如果隐藏未经授权的用户的内部代码是您的应用程序的要求，我建议将其拆分为两个单独的应用程序和单独的捆绑包。 从一个到另一个需要一个单独的请求，但这似乎与你想要完成的一致。

Answer 2

好问题。 我不知道任何漂浮在那里的绝对最佳做法似乎超过了其他人，因此我将在这里提供一些提示/想法：

• 当然，远程API应该处理实际的身份验证。
• 会话需要共享，所以像redis这样的商店通常是个好主意，尤其是。 用于快速读取。
• 如果你正在进行涉及水合作用的服务器端渲染，你需要一种方法来共享服务器和客户端之间的会话状态。 请参阅以下链接，了解做出普遍反应的一种方法
• 在客户端上，您可以发送会话cookie或JWT令牌，将其读入内存（可能使用redux并将其保存在您的状态树中？）并且可能使用中间件（la redux？）将其设置为请求时的标头。
• 在客户端上，您还可以依赖localStorage来保存cookie / JWT
• 也许将代码分成两个包，一个用于auth，一个用于实际的app逻辑？

也可以看看：

• 水化示例https://github.com/erikras/react-redux-universal-hot-example
• https://github.com/erikras/react-redux-universal-hot-example/issues/608

Answer 3

只要商店不包含用户未被授权拥有的数据，即使黑客检查源并看到他不应该访问的模块/链接，也不应该有太多问题。

商店内的状态以及关键逻辑将来自服务和那些需要保护的，无论是否是SPA; 但特别是在SPA上。

另外：使用Redux进行服务器端渲染并不复杂。 你可以在这里读到它：

http://redux.js.org/docs/recipes/ServerRendering.html

它基本上只用于提供具有预定义状态的根html。 这进一步提高了安全性和加载速度，但并不违背SPA背后的想法。