如何保护 Vuejs SPA 中的前端？

Posted 2023-03-14

【中文标题】如何保护 Vuejs SPA 中的前端？

【英文标题】：How can I secure Front-End in a Vuejs SPA?

【发布时间】：2020-07-22 14:52:50

【问题描述】：

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

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

我怎样才能阻止它们？以及保护 SPA 的最佳方法是什么？

提前致谢。

【参考方案1】：

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

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

但是 - 如果你在同一个项目中使用 Laravel 和 Vue（所以 Vue 是由 Blade 启动的），这意味着你可以像在 Nuxt 中一样检查用户，然后它才会收到任何内容。只需为它制作中间件。但这仅有助于阻止整个页面，而不是基于多个角色更改（以安全方式）单个页面上的内容。再说一遍 - 你需要 s-s-r。

对于任何解决方案，我建议您使用 Laravel - Sanctum (https://laravel.com/docs/7.x/sanctum) 的新官方库。

【讨论】：

好的，谢谢chojnicki的解释，我会学习Nuxt.js的。。我在同一个项目中使用Vue和Laravel，但是我没有使用Blade，我只是做了一个* Route所以一切都将在 Vuejs 上呈现。

【参考方案2】：

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

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

【讨论】：

我在后端没有问题，我只是对前端感到困惑。

nuxt.js 到服务器端渲染怎么样？