vue实现菜单权限

基于路由的动态菜单权限控制

在Vue中实现菜单权限通常需要结合路由配置和用户角色/权限数据。以下是常见的实现方法：

路由配置中添加权限标识

// router.js
const routes = [
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      permissions: ['admin'] // 需要的权限标识
    }
  }
]

获取用户权限并过滤路由

// 假设用户权限数据
const userPermissions = ['admin', 'editor']

function filterRoutes(routes) {
  return routes.filter(route => {
    if (route.meta && route.meta.permissions) {
      return route.meta.permissions.some(perm => 
        userPermissions.includes(perm)
      )
    }
    return true
  })
}

基于Vuex的权限状态管理

Vuex存储权限数据

// store/modules/auth.js
export default {
  state: {
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    fetchPermissions({ commit }) {
      // API请求获取权限数据
      return api.getPermissions().then(res => {
        commit('SET_PERMISSIONS', res.data)
      })
    }
  }
}

组件中使用权限判断

<template>
  <div v-if="$store.getters.hasPermission('admin')">
    <!-- 仅管理员可见内容 -->
  </div>
</template>

基于自定义指令的细粒度控制

注册权限指令

// main.js
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = vnode.context.$store.state.auth.permissions

    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

模板中使用指令

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

服务端返回的菜单结构处理

处理动态菜单数据

// 假设服务端返回的菜单结构
const serverMenu = [
  {
    name: 'Dashboard',
    path: '/dashboard',
    icon: 'dashboard',
    permission: 'view_dashboard'
  }
]

// 转换服务端菜单为路由
function generateRoutes(menuData) {
  return menuData.map(item => ({
    path: item.path,
    name: item.name,
    component: () => import(`@/views/${item.name}`),
    meta: {
      icon: item.icon,
      permission: item.permission
    }
  }))
}

按钮级别权限控制

权限混入(mixin)

// mixins/permission.js
export default {
  methods: {
    checkPermission(permission) {
      return this.$store.state.auth.permissions.includes(permission)
    }
  }
}

组件中使用混入

<script>
import permissionMixin from '@/mixins/permission'

export default {
  mixins: [permissionMixin],
  methods: {
    handleDelete() {
      if (!this.checkPermission('delete')) {
        return this.$message.error('无权限')
      }
      // 执行删除操作
    }
  }
}
</script>

这些方法可以单独使用或组合使用，具体取决于项目需求和权限系统的复杂度。实际实现时需要根据后端API返回的权限数据格式进行调整。