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

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

当角色很大时，应用程序就会变得巨大，控制crud操作的逻辑就变成了一项乏味的任务

因此，我正在寻找一个安全的模型设置，我们不应该向浏览器提供用户/管理员/内容，除非他经过身份验证。浏览器意味着不应该加载javascript脚本

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

这是一个好方法吗？或者有没有更好的方法来处理Vue？登录后是否需要使用Express来加载服务器内容

正在查找有关此安全应用程序的示例或参考文档

---

另外，如果您发现代码库变得不可维护，那么在注销后或令牌过期时，创建新的或单独的Vue实例或应用程序是简化代码库的一种方法；但是，vue.js有保持代码整洁的工具，即使有各种角色和路由

在路由器文件（src/router目录中的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应用商店获取当前用户，那么您就大大简化了应用程序

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

Vuex： Vue.js路由器防护装置：

对于其他类型的基于角色的函数，比如依赖于角色的粒度组件行为，我不确定组织代码的最佳方法是什么

---

在vue.js中，我自己的方法是尝试在每个组件中以逻辑方式组织代码，以实现清晰性和可维护性

创建两个用于检查身份验证的函数

import Login from '@/components/Auth/Login';
import AdminContents from '@/views/user/admin/contents';
import Home from '@/components/Home/Home';
import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';

Vue.use(Router);

const ifAuthenticated = (to, from, next) => {
  if (store.getters['auth/isAuthenticated']) {
    return next();
  }
  return next('/login');
};

const ifNotAuthenticated = (to, from, next) => {
  if (!store.getters['auth/isAuthenticated']) {
    return next();
  }
  return next('/');
};

const router = new Router({
mode: 'history',
routes: [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    beforeEnter: ifNotAuthenticated,
  },
  {
    path: '/',
    component: Home,
    children: [
     {
      path: '/admin-contents',
      name: 'admincontents',
      component: AdminContents,
      beforeEnter: ifAuthenticated,
     },
    ],
  },
 ],
});

---

非常感谢路由器防护，Vuex被认为是默认的。我唯一关心的是安全问题。在查看源代码时，可以读取生产分布式代码，它包含管理面板拥有的所有必要信息。如何不提供不需要的内容？为什么我应该在用户登录时加载管理组件？发布一些代码可能会有好处；也许我认为你的问题比实际更一般。我要说的是：（如果）想法只是“不显示”组件中的某些内容给具有特定角色的特定用户，那么您可以使用模板解决方案，如显示切换。考虑v-show=“displayThis”，其中“displayThis”切换可以是基于角色的计算字段。没有看到您的代码，这是另一种普遍的可能性。这是非常简单的，我们目前正在遵循。当我们已经导入了AdminContents的内容时，webpack将把它和它在脚本中的存在捆绑起来。路由器只是在UI中扮演渲染的角色。