如何在未经身份验证的情况下不提供Vue应用程序中的管理页面内容？

Question

通过基于角色的身份验证设置，我们可以控制路由和组件以在Vue应用程序中的普通用户和管理员之间隐藏。

当角色很大时，应用程序变得很大，而控制粗体操作的逻辑就变得很繁琐。

因此，我正在寻找一种安全的模型设置，除非我们对其进行身份验证，否则我们不应该向浏览器提供用户/管理员/内容。浏览器，表示不应加载javascript脚本。

所以，我有一个想法，我们可以通过一个简单的HTML页面并使用包含用户详细信息的jwt令牌重定向到一个单独的应用程序。

这是一个好方法吗？还是有一种更好的方法可以通过Vue处理呢？登录后，我们是否需要在两者之间使用Express来加载服务器内容？

在此安全应用程序上查找示例或参考文档。

也要在注销或令牌过期后寻找清除浏览器的缓存

Answer 1

创建新的或单独的Vue实例或应用程序是简化代码库的一种方法，如果您发现它变得不可维护；但是，vue.js具有即使代码和角色不同也能使代码保持整洁的工具。

在路由器文件中（src /路由器目录中为index.js），您可以添加所谓的路由器防护。他们看起来像这样：

path: "/uploadavatar",
    name: "UploadAvatar",
    component: () =>
      import(
        /* webpackChunkName: "uploadavatar" */ "../views/UploadAvatar.vue"
      ),
    beforeEnter(routeTo, routeFrom, next) { 
    // do something here like check the current user role(s)
    }

[通常，我建议调查路由器防护装置是否可以满足您的需求。

此外，除非使用Vuex，否则维护各种应用程序对象的状态可能会因角色不同而变得棘手。

Vuex是Vue.js的软件包，它为您的应用程序创建一个中央状态存储库，因此，如果一个组件从一个位置，选项卡或功能更改对象，则该状态将被共享（并更新）到其他从属组件，并且意见。 Vuex基本上管理应用程序中数据的“单一真相”。

这两个建议：使用路由器防护和Vuex，应该为您提供一些灵活性：

Vuex：https://vuex.vuejs.org/guide/Vue.js路由器后卫：https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

对于其他类型的基于角色的功能，例如依赖于角色的细化组件行为，我不确定最好的方法是什么。在vue.js中，我自己的方法是尝试对每个组件进行逻辑上的组织以提高清晰度和可维护性。