vue实现列表权限

实现列表权限的基本思路

在Vue中实现列表权限通常涉及根据用户角色或权限动态渲染列表内容。核心逻辑是通过权限判断控制列表项的显示、隐藏或操作权限。

权限数据管理

使用Vuex或Pinia存储全局权限数据，便于组件间共享。权限数据通常来自后端API，在登录后获取并存入状态管理库。

// Vuex示例
state: {
  permissions: ['view_list', 'edit_item', 'delete_item']
}

条件渲染控制

通过v-if或v-show指令结合权限判断函数控制元素显示。推荐使用计算属性封装权限判断逻辑。

computed: {
  hasEditPermission() {
    return this.$store.state.permissions.includes('edit_item')
  }
}

<button v-if="hasEditPermission">编辑</button>

自定义指令实现

创建全局指令v-permission简化权限控制，使模板更简洁。

Vue.directive('permission', {
  inserted(el, binding) {
    const permissions = store.state.permissions
    if (!permissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

<button v-permission="'delete_item'">删除</button>

动态路由配置

结合Vue Router实现路由级权限控制，过滤无权限访问的列表页面。

router.beforeEach((to, from, next) => {
  const requiredPermission = to.meta.permission
  if (requiredPermission && !store.state.permissions.includes(requiredPermission)) {
    next('/forbidden')
  } else {
    next()
  }
})

服务端配合

前端实现应配合后端API进行二次验证。所有敏感操作需后端校验权限，防止仅靠前端控制的安全漏洞。

async deleteItem(id) {
  try {
    await api.deleteItem(id) // 后端会校验权限
  } catch (error) {
    console.error('操作被拒绝：', error)
  }
}

权限组件封装

对于复杂权限场景，可创建可复用的权限组件统一处理权限逻辑。

Vue.component('Permission', {
  props: ['required'],
  render(h) {
    if (this.$store.state.permissions.includes(this.required)) {
      return this.$slots.default[0]
    }
    return h()
  }
})

<Permission required="export_data">
  <button>导出数据</button>
</Permission>