vue index.js beforeEach根据权限动态加载不同的json对象控制权限

你可以通过Vue Router的`beforeEach`导航守卫来实现根据权限动态加载不同的JSON对象控制权限。

具体做法如下：

1. 在Vue Router中定义路由和相应的权限：

const router = new VueRouter({
  routes: [
    { 
      path: '/admin', 
      component: AdminComponent,
      meta: { requiredPermission: 'admin' } // 需要admin权限才能访问
    },
    { 
      path: '/user', 
      component: UserComponent,
      meta: { requiredPermission: 'user' } // 需要user权限才能访问
    }
  ]
})

2. 在`beforeEach`守卫中判断用户权限，并动态加载相应的JSON对象：

router.beforeEach((to, from, next) => {
  const requiredPermission = to.meta.requiredPermission
  const userPermission = getUserPermission() // 获取用户权限

  if (requiredPermission && userPermission !== requiredPermission) {
    // 如果用户没有访问该路由的权限，则跳转到 403 页面
    next('/403')
  } else {
    // 动态加载相应的JSON对象
    const jsonFile = requiredPermission + '.json'
    import(`./json/${jsonFile}`).then((json) => {
      // 将JSON对象存储到全局变量中
      window.permission = json
      next()
    })
  }
})

3. 在组件中使用全局变量`window.permission`来控制权限：

// 在组件中使用全局变量 window.permission 控制权限
export default {
  data() {
    return {
      permission: window.permission
    }
  },
  computed: {
    canEdit() {
      return this.permission.canEdit
    },
    canDelete() {
      return this.permission.canDelete
    }
  }
}

这样，就可以根据用户权限动态加载不同的JSON对象，从而实现权限控制。