如何在Vuejs SPA中保护前端？

Question

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

我知道一种解决方案，就是将它们保存在中。 但是，如果某人知道我的角色的 LocalStorage密钥，并且他们像普通用户一样进行了更改，就可以看到 Admin Dashboard 的样子（只是前端）以及管理员可以在应用程序中看到的内容。

如何防止它们？以及保护SPA的最佳方法是什么？

谢谢。

Answer 1

您永远不能将SPA前端视为“安全”。如果在浏览器上执行了某些操作，则表示它可以由用户修改。当然，这并不意味着SPA不好，不，不是，它不是每个项目的好解决方案。 如果要确保用户永远不会看到管理仪表板，则应将其放在单独的捆绑软件中，甚至最好放在单独的项目中。

相反-考虑将SPA迁移到SSR（在Vue中，您可以为此使用Nuxt.js（https://nuxtjs.org/））。 谢谢，此用户将仅收到HTML响应（就像在带有Blade的Laravel中一样）。因此，您可以验证用户身份并检查角色，然后用户才能接收任何内容（并由此阻止访问管理面板）。

但是-如果您在同一项目中将Laravel与Vue一起使用（因此Vue由Blade启动），则意味着您可以像在Nuxt中检查用户一样，先接收用户任何内容。只是为此做中间件。但这只会通过阻止整个页面来提供帮助，而不能基于多个角色（以安全的方式）更改单个页面上的内容。再说一遍-您需要SSR。

对于所有解决方案，我建议您使用Laravel-Sanctum（https://laravel.com/docs/7.x/sanctum）的新官方库。

Answer 2

Laravel API使用角色和权限来检查用户是否可以做某事。

客户端保存jwt令牌并使用jwt认证Laravel API。您将在laravel端获得用户信息。在角色表中使用用户ID检查。