前端访问控制

实现原理: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登录后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 router.addRoute 添加到路由实例，实现权限的过滤。

缺点: 权限相对不自由，如果后台改动角色，前台也需要跟着改动。适合角色较固定的系统

步骤

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

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

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

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  app: {
    // 默认值，可不填
    accessMode: 'frontend',
  },
});

​

• 配置路由权限

如果不配置，默认可见

 {
    meta: {
      authority: ['super'],
    },
},

​

• 确保接口返回的角色和路由表的权限匹配

可查看应用下的 src/store/auth,找到下面代码，

// 设置登录用户信息，需要确保 userInfo.roles 是一个数组，且包含路由表中的权限
// 例如：userInfo.roles=['super', 'admin']
authStore.setUserInfo(userInfo);

​

到这里，就已经配置完成，你需要确保登录后，接口返回的角色和路由表的权限匹配，否则无法访问。

菜单可见，但禁止访问

有时候，我们需要菜单可见，但是禁止访问，可以通过下面的方式实现，设置 menuVisibleWithForbidden 为 true，此时菜单可见，但是禁止访问，会跳转403页面。

{
    meta: {
      menuVisibleWithForbidden: true,
    },
},