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

Question

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

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

我已经想到了三种不同的方法，其中没有一种方法让我非常满意：

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

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

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背后的想法。