如何对未经授权的客户隐藏网站的 Vue.js 管理面板代码

Question

我有一个网站，在 Laravel 8 和 Vue.js 3 上运行。管理面板的前端完全基于 Vue，而来宾用户则使用 Laravel 的刀片。

我担心未经授权的客户可能会在登录页面上检查管理面板的代码，因为它是 Vue 的一部分。

当然，客户端不会从服务器获取任何信息，没有身份验证。她/他所能看到的只是没有任何信息的空白面板。

所以问题是，客户端可以分析代码的整个功能，查看用于管理站点内容的所有路由。这为安全研究人员提供了目标位置、发送内容和预期内容的完整信息。

另外，我知道 异步组件，但这不是这里的答案，因为这些组件是由可预测的名称命名的。所以无论如何都可以获得完整的工作代码。

如果我将单独制作子域，那么这些子域也可以被扫描和暴露。由于管理人员在不同的位置工作，因此基于 IP 地址拒绝路由也不是解决方案。

如何从 Laravel 控制这个，只有经过身份验证的用户才能看到面板的代码？我应该尝试解决这个问题吗？

Answer 1

我的做法是使用 webpack 编译两个不同的文件，并在刀片文件中进行逻辑测试。

因此，根据用户类型，页面将加载不同的文件，但我不介意它们留在公共目录中。我将每个管理员请求都放在管理员中间件中。

你可以让 laravel 使用某种控制从公共目录和另一个移动文件。仅当管理员请求页面并加载完成时才公开您的管理文件。我知道这是可能的，但我自己从未测试过。