当前位置：首页 > VUE

vue 实现权限

2026-01-07 08:27:30VUE

Vue 实现权限控制的方法

在 Vue 项目中实现权限控制通常涉及前端路由、组件和按钮级别的权限管理。以下是几种常见的实现方式：

路由权限控制

通过路由守卫实现权限验证，过滤用户无权访问的路由：

// router.js
const router = new VueRouter({...})

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles // 从Vuex获取用户角色
  const requiredRoles = to.meta.roles // 路由需要的角色

  if (requiredRoles && !requiredRoles.some(role => userRoles.includes(role))) {
    next('/forbidden') // 无权限跳转
  } else {
    next()
  }
})

动态路由生成

根据用户权限动态生成可访问的路由表：

// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    } else {
      return true
    }
  })
}

// 添加动态路由
store.dispatch('GenerateRoutes', roles).then(accessRoutes => {
  router.addRoutes(accessRoutes)
})

组件级权限控制

使用自定义指令实现组件级别的权限控制：

// main.js
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('需要指定权限数组')
    }
  }
})

// 使用方式
<template>
  <button v-permission="['admin']">管理员按钮</button>
</template>

按钮级权限控制

通过方法或计算属性控制按钮显示：

// 方法实现
methods: {
  checkPermission(permission) {
    return this.$store.getters.permissions.includes(permission)
  }
}

// 计算属性实现
computed: {
  hasEditPermission() {
    return this.$store.getters.permissions.includes('edit')
  }
}

// 模板中使用
<button v-if="hasEditPermission">编辑</button>

权限数据管理

通常使用 Vuex 存储权限相关数据：

// store/modules/permission.js
const state = {
  roles: [],
  permissions: []
}

const mutations = {
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  SET_PERMISSIONS: (state, permissions) => {
    state.permissions = permissions
  }
}

const actions = {
  getInfo({ commit }) {
    return new Promise((resolve, reject) => {
      getInfo().then(response => {
        const { roles, permissions } = response.data
        commit('SET_ROLES', roles)
        commit('SET_PERMISSIONS', permissions)
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
}