【低代码】单路由权限设计

创建一个全局的响应式权限数据对象：

// globalPermissions.js
import { reactive } from 'vue';

export const globalPermissions = reactive({
  permissionsData: {},
});

在应用启动时从后端获取权限数据并存储到全局响应式对象中：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { globalPermissions } from './globalPermissions';

async function fetchPermissionsData() {
  // 模拟从后端获取权限数据的 API 请求
  const response = await fetch('/api/permissions');
  const data = await response.json();

  // 将获取到的权限数据存储在全局响应式对象中
  globalPermissions.permissionsData = data;
}

// 在应用启动时获取权限数据
fetchPermissionsData().then(() => {
  const app = createApp(App);
  app.provide('globalPermissions', globalPermissions);
  app.mount('#app');
});

在您的页面组件中使用 inject 函数来访问全局权限数据：

<template>
  <div>
    <!-- 动态加载子组件 -->
    <component :is="currentComponent"></component>

    <!-- 根据权限渲染按钮 -->
    <button v-if="hasPermission('add')">添加</button>
    <button v-if="hasPermission('edit')">编辑</button>
    <button v-if="hasPermission('delete')">删除</button>
  </div>
</template>

<script>
import { inject, computed } from 'vue';
import Page1 from './Page1.vue';
import Page2 from './Page2.vue';

export default {
  props: ['code'],
  setup(props) {
    // 从全局响应式对象中获取权限数据
    const globalPermissions = inject('globalPermissions');
    const permissionsData = globalPermissions.permissionsData;

    // 根据 code 动态加载子组件
    const components = { page1: Page1, page2: Page2 };
    const currentComponent = computed(() => components[props.code]);

    // 检查按钮权限
    function hasPermission(permission) {
      const permissions = permissionsData[props.code];
      return permissions && permissions.includes(permission);
    }

    return { currentComponent, hasPermission };
  },
};
</script>

您可以根据每个菜单项的 code 来管理权限，同时在浏览器打开多个页面时不会混淆权限。刷新页面时，由于全局响应式对象会保留权限数据，因此不会影响其他页面的权限。