VueRouter 的客户端授权如何安全？答案

【问题标题】：How is client-side authorization with VueRouter safe?VueRouter 的客户端授权如何安全？
【发布时间】：2021-11-20 16:34:00
【问题描述】：

编辑：在单页应用程序中，所有静态内容都加载到 SPA 中，因此如果静态内容中有任何远程敏感内容，可以从浏览器中查看。唯一的解决方案是不使用 SPA 并从服务器端呈现授权页面，如果这些页面需要模型视图 AJAX JS 控制器，请不要在控制器代码中公开任何敏感内容，因为这也将提供静态服务。

我研究了 VueRouter 的代码并阅读了其他几个示例，这些示例使用警卫和预检查来执行身份验证（通过 cookie 或会话数据令牌）以阻止某些路由，除非用户获得许可。

我不明白这怎么安全？ VueRouter示例阻塞了dashboard页面，但是我可以在浏览器调试控制台中逐字查看所谓的“阻塞”页面，然后在源代码面板中编辑JavaScript绕过授权，通过删除requireAuth函数中的勾选并替换使用“下一个（）”。

我显然遗漏了一些东西，但是如果可以在浏览器中查看/编辑内容和 javascript，那么这是一种授权您网站部分内容的有效方法吗？

【问题讨论】：

【解决方案1】：

保护您的应用程序应该在后端完成，因为您可以完全控制那台机器。正如您清楚地所说，VueRouter 通常用于根据 authentication 和 authorization 显示/隐藏 UI 元素。您必须始终假设任何人都可以在他们的本地计算机上读取和修改您的前端。

需要明确的是，无论您使用的是 Vue、React 还是任何其他前端框架，都必须在后端应用安全性。

【讨论】：

所以我说得对，服务器端渲染是授权的要求？例如，在后端进行身份验证并获得令牌后，最终由服务器决定要呈现哪些页面（无论是 PHP 还是 Node ...）。因此，在静态/公共区域中拥有需要授权的页面是没有意义的（相反，它们应该在授权后由 GET 端点呈现，对吧？）
我不太了解您的应用程序的架构，但我可以告诉您，我们通常根据用户是否登录以及他们的角色被允许用于他/她声称的操作。
是的，这就是我一直在做的事情，但被抛出了一个循环，其中有几十个 Vue 教程解释如何授权客户端。服务器必须验证每个端点，你不能只发送整个 SPA，然后决定向客户端显示什么——你仍然需要获取数据来填充 SPA 的反应字段，但你仍然暴露了一些SPA 中的内容，因为它是静态的。谢谢！