权限 vue组件 实现

权限 Vue 组件实现方法

基于路由的权限控制

在 Vue 项目中可以通过路由守卫实现权限控制。在路由配置中为每个路由添加 meta 字段，定义访问该路由所需的权限。

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/user',
    component: UserDashboard,
    meta: { requiresAuth: true, roles: ['user', 'admin'] }
  }
]

在全局前置守卫中检查用户权限：

router.beforeEach((to, from, next) => {
  const currentUser = store.state.user
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) {
    next('/login')
  } else if (requiresAuth && !hasPermission(to.meta.roles, currentUser.roles)) {
    next('/403')
  } else {
    next()
  }
})

指令式权限控制

创建自定义指令 v-permission，用于控制DOM元素的显示：

Vue.directive('permission', {
  inserted: (el, binding, vnode) => {
    const { value } = binding
    const roles = store.getters.roles

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = roles.some(role => value.includes(role))

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('需要指定权限数组')
    }
  }
})

使用方式：

<button v-permission="['admin']">管理员按钮</button>

组件式权限控制

创建可复用的权限组件：

<template>
  <div v-if="checkPermission">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Permission',
  props: {
    required: {
      type: Array,
      required: true
    }
  },
  computed: {
    checkPermission() {
      const roles = this.$store.getters.roles
      return this.required.some(role => roles.includes(role))
    }
  }
}
</script>

使用方式：

<permission :required="['admin']">
  <admin-panel></admin-panel>
</permission>

权限数据管理

在Vuex中管理权限状态：

const store = new Vuex.Store({
  state: {
    user: null,
    permissions: []
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.permissions = user.permissions
    }
  },
  getters: {
    roles: state => state.user ? state.user.roles : [],
    permissions: state => state.permissions
  }
})

动态菜单生成

根据权限动态生成侧边栏菜单：

computed: {
  accessibleRoutes() {
    return this.routes.filter(route => {
      if (!route.meta || !route.meta.roles) return true
      return route.meta.roles.some(role => this.userRoles.includes(role))
    })
  }
}

按钮级权限控制

创建权限判断方法，用于细粒度控制：

methods: {
  hasPermission(permission) {
    return this.$store.getters.permissions.includes(permission)
  }
}

模板中使用：

<button v-if="hasPermission('user:delete')">删除用户</button>

服务端权限验证

即使前端实现了权限控制，仍需服务端验证：

async function checkPermission() {
  try {
    const res = await axios.get('/api/check-permission', {
      params: { requiredPermission: 'user:delete' }
    })
    return res.data.hasPermission
  } catch (error) {
    console.error('权限检查失败', error)
    return false
  }
}

这些方法可以组合使用，根据项目需求选择适合的权限控制方案。路由级控制适合页面访问权限，指令和组件适合UI元素控制，服务端验证确保安全性。