项目权限控制

权限系统模型

• 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
/>

权限如何设计的？

面试回答（这块不用想的太复杂，就是需要表述清楚前端和后端对应的权限）

• 总：划范围/说结论

  • 路由，菜单，按钮，模块

  我之前在公司参与过这块的设计，我们公司分授权系统和权限系统，授权是登录相关的内容，权限是登录后进行权限配置的内容，这块又分两份，一份资源权限由前端进行负责，一份是数据权限由后端进行负责，资源权限我们又分成路由，菜单，按钮和模块权限；数据权限是控制用户能够访问和操作的具体数据范围

• 分：聊重点，对分类内容或结论中的其他点进行拓展

  • 路由

    其中路由权限是最主要也是粒度最粗的基础权限设计，他的核心是利用 beforeEach 自动执行进行实现

    整个加载流程上先进行 beforeEach 内容的执行，如果未登录进行授权的处理，授权这块我们也做过相应的优化，如果已登录，我们会进行 userinfo 的查询,获取对应的权限信息