如何确保Vuejs SPA的前端安全？

Question

我正在使用Vuejs和使用Laravel的构建一个SPA，用户可以有多个角色，保存令牌和用户角色的最佳方法是什么？以及阻止用户知道角色是什么？

我还知道一个解决方案，就是将它们保存在Cookies和LocalStorage中。但是，如果有人知道我的LocalStorage key中的角色，并且他们就像一个普通的用户，并对其进行了更改，那么他们就可以看到Admin仪表板是什么样子(仅仅是前端)，以及Admin在应用程序中可以看到什么。

我怎样才能阻止他们？确保SPA安全的最佳方法是什么？

--谢谢--

Answer 1

你永远不能认为SPA前端是“安全的”。如果在浏览器上执行某项操作，则意味着用户可以对其进行修改。当然，这并不意味着SPA是坏的，不，不，只是它不是每个项目的好解决方案。如果您想确保用户永远不会看到管理仪表板，那么它应该在单独的包中，或者更好的单独的项目中。

相反-考虑将SPA迁移到SSR (在Vue中，您可以使用Nuxt.js (https://nuxtjs.org/)来实现这一点)。感谢这个用户只会收到HTML响应(就像在Laravel和Blade一样)。因此，您可以在用户接收任何内容之前对用户进行身份验证并检查角色(并以此阻止对管理面板的访问)。

但是-如果您在同一个项目中使用Laravel (所以Vue是由Blade发起的)，这意味着您可以像在Nuxt检查用户之前接收任何内容。只需为其制作中间件即可。但是它只会阻止整个页面，而不是基于多个角色在单个页面上更改(以安全的方式)内容。所以再一次-你需要SSR。

对于任何解决方案，我建议你使用新的官方图书馆从拉拉维尔-桑克顿(https://laravel.com/docs/7.x/sanctum)。

Answer 2

Laravel使用角色和权限来检查用户可以做些什么。

客户端保存jwt令牌并使用jwt来使用Laravel。你会得到用户的信息在拉拉边。使用用户id签入角色表。