制定一个权限方案

上次更新 2024年8月12日星期一 6:21:5 字数 0 字 时长 0 分钟

当然具体方案具体分析 需要根据具体业务场景来定

首先我们要分析 权限分为哪几种： 比如：用户权限 角色权限 菜单权限 用户权限 角色权限 菜单权限 耦合程度可能是比较高的 菜单权限 是一个很模糊的概念 更多权限定义是依赖于 用户权限 角色权限 来约束 菜单权限 的 因此尽可能避免 菜单、角色、用户 三者之间 强耦合 是很重要的

或者 也可以笼统称作页面权限 按钮权限； 这里分的较为细致 后续方案 会更加合理

页面权限：

我们可以采用 动态加载路由的方式实现 ，若有权限即加载该页面，反之则不加载；

按钮权限：

可以采用 权限拦截 具体实现层面可以通过 是否显示按钮来实现

页面权限的实现

菜单、角色、用户 权限 可能既存在页面权限，又存在按钮权限

1.获取页面级别的权限

2.建立页面与权限的映射关系

3.获取到当前页面的权限

按钮权限：

1.获取按钮级别的权限

权限关系的获取

1.可以通过 获取 userInfo 信息时候携带权限信息。

具体代码实现 获取页面权限

// 获取的结果如下
const data =[
    {
        path: '/dashboard',
        name: 'dashboard',
        parentPath:'parentPath',
        filePath:'/dashboard.vue'
        meta: {
            title: '首页',
            icon: 'dashboard'
            // 权限
            permission: ['admin', 'editor']
            // 菜单
            menu: true
            // 菜单顺序
            order: 1
            // 菜单是否隐藏
            hidden: false
            // 菜单默认选中
            selected: false
            // 菜单是否展开
            expanded: false
            // 菜单是否禁用
            disabled: false
        },
    }
]

data.forEach(item => {
  const comp =  import(`@/views${item.filePath}`)
//   参数1
  route.addRoute({
    path:item.path,
    component:comp,
    meta:item.meta
  })
})