项目权限控制

权限系统模型

• RBAC模型：基于角色的权限控制
• ABAC模型：基于属性的权限控制，根据主体（用户）、客体（资源）等多方面属性来决定权限，属性可以是任何与访问相关的信息，像用户的部门、职位、资源的机密级别、访问时间等

RBAC 实现方式

• 前端：路由权限控制 + 按钮权限控制（自定义指令）
• 后端：接口权限控制（中间件）

路由权限

根据不同的用户身份，动态生成页面路径信息。

按钮权限（自定义指令）

// src/directives/permission.ts
import { useUserStore } from '@/stores/user'
import { ROLES_MAP, type Roles } from '@/utils/permission'
import type { App } from 'vue'

const user = useUserStore()
export const permission = (app: App) => {
  app.directive('permission', {
    mounted(el, binding) {
      const roleList = binding.value || []
      if (!roleList.length) return el.remove()
      const valid = roleList.find(
        (item: Roles) => ROLES_MAP[user.role] === item
      )
      if (!valid) el.remove()
    }
  })
}

// main.ts
import { permission } from '@/directives/permission'
app.use(permission)

使用：

<el-table-column
  v-permission="['admin']"
  prop="password"
  label="密码"
  width="120"
  show-overflow-tooltip
/>