后端访问控制

实现原理: 是通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 router.addRoute 添加到路由实例，实现权限的动态生成。

缺点: 后端需要提供符合规范的数据结构，前端需要处理数据结构，适合权限较为复杂的系统。

步骤

• 确保当前模式为后端访问控制模式

调整对应应用目录下的 preferences.ts，确保 accessMode='backend'。

import {defineOverridesPreferences} from '#/components/common/core/preferences';

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  app: {
    accessMode: 'backend',
  },
});

​

• 确保接口返回的菜单数据结构正确

可查看应用下的 src/router/access.ts,找到下面代码，

async function generateAccess(options: GenerateMenuAndRoutesOptions) {
  return await generateAccessible(preferences.app.accessMode, {
    fetchMenuListAsync: async () => {
      // 这个接口为后端返回的菜单数据
      return await getAllMenus();
    },
  });
}

​

• 接口返回菜单数据，可看注释说明

const dashboardMenus = [
  {
    meta: {
      order: -1,
      title: 'page.dashboard.title',
    },
    name: 'Dashboard',
    path: '/',
    redirect: '/analytics',
    children: [
      {
        name: 'Analytics',
        path: '/analytics',
        // 这里为页面的路径，需要去掉 views/ 和 .vue
        component: '/dashboard/analytics/index',
        meta: {
          affixTab: true,
          title: 'page.dashboard.analytics',
        },
      },
      {
        name: 'Workspace',
        path: '/workspace',
        component: '/dashboard/workspace/index',
        meta: {
          title: 'page.dashboard.workspace',
        },
      },
    ],
  },
  {
    name: 'Test',
    path: '/test',
    component: '/test/index',
    meta: {
      title: 'page.test',
      // 部分特殊页面如果不需要基础布局（页面顶部和侧边栏），可将noBasicLayout设置为true
      noBasicLayout: true,
    },
  },
];

​

到这里，就已经配置完成，你需要确保登录后，接口返回的菜单格式正确，否则无法访问。