Vue 或 React SPA 可以阻止某些页面的访问吗？答案

【问题标题】：Can Vue or React SPA block access for some pages?Vue 或 React SPA 可以阻止某些页面的访问吗？
【发布时间】：2021-05-29 00:02:59
【问题描述】：

我现在正在使用 Vue.js 构建一个 SPA（单页应用程序），

并且会有一些授权人可以访问的管理页面。

Vue 前端服务器将通过 REST API 与后端 Express.js 服务器通信。

在这种情况下，我认为SPA是立即加载并与之反应的概念，而不像apache这样的传统MPA，它在服务器上运行代码并用HTML折腾它，所以管理员页面将在源代码中，即使这些信息是由 Express.js 使用 ajax(axios) 授权的，我理解对吗？

所以即使我在每次授权之前使用Vue-router，也有人可以看到管理页面的框架，对吧？

如果是这样，有没有更好的办法阻止他们访问？

【问题讨论】：

【解决方案1】：

SPA 的所有代码不需要一次性加载。您可以使用Async Components 将代码拆分为多个块，仅在需要时在运行时动态加载。这在您的情况下特别有用，因为管理部分的代码不需要由非管理员用户（可能是大多数用户）下载/解析/执行 - 请参阅Lazy Loading Routes

最重要的是，您的 Express 服务器应用无论如何都应该授权每个服务器调用。如果未经授权的用户以某种方式设法执行和显示管理部分，那么如果服务器不返回任何“仅限管理员”数据来显示或允许在服务器端执行任何仅限管理员的操作，这对他来说将毫无用处......

【讨论】：