ASP.NET 使用 VueJS 的 SPA:仅根据授权服务某些 routes/files

ASP.NET SPA with VueJS: only serving certain routes/files based on authorization

进度:

我一直在制作一个带有 SPA 选项的 ASP.NET Web API 项目,我在其中提供一个 Vue.js 应用程序。

我已经为后端 API 控制器设置了身份验证和授权,因此可以登录并从某些端点发出请求,前提是角色授权。

问题:

我看到的一个问题(或者我可能看错了)是在生产中客户端应用程序被捆绑并提供给用户。 截至目前,此应用程序还包含某些页面,其中包含管理员的数据库修改属性。控制器为此设置得很好,除了管理员之外没有人可以访问这些 API 端点。

但是,在我的客户端应用程序中,这些页面包含具有数据库结构的表单(例如添加表单),因为提供了捆绑的 js,任何用户都可以在捆绑的 js 中看到此页面(对吗?),即使我添加vue-router授权。

问题:

因此,我的问题是,我如何才能只向权限较低的用户提供我的客户端应用程序的授权部分,或者我应该采用制作多个客户端应用程序的方法并在后端添加授权以提供这些单独的捆绑包?

However, in my client-app these pages contain forms with database structures (e.g. an add form), since the bundled js gets served, any user can see this page in the bundled js

是的,但为什么这是个问题?假设你的表单是 Vue 组件,整个模板被编译成 Javascript。您可以自己查看生产构建包并问问自己是否可以通过阅读它来收集任何有用的信息(并且您知道源代码!)

只需使用与 API 相同的基于角色的系统来保护 vue-router 路由(例如使用 meta fields),这样非管理员用户就无法访问路由。

此外,您还可以制作这条路线 lazy loaded。这意味着呈现它们的代码将由浏览器仅供管理员用户下载。无论如何,这是一个好主意,因为对于大多数用户而言,您的应用会更小更快(假设大多数用户不是管理员)