当前位置：首页 > VUE

vue实现操作权限控制

2026-01-20 15:58:37VUE

Vue 权限控制实现方法

路由级权限控制

通过路由守卫拦截未授权访问，结合用户角色动态生成路由表。在路由配置中添加meta字段定义权限标识：

// router.js
const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true, roles: ['admin'] }
  }
]

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!userRoles.some(role => to.meta.roles.includes(role))) {
      next('/403')
    }
  }
  next()
})

组件级权限控制

使用自定义指令v-permission实现元素级权限控制，注册全局指令：

vue实现操作权限控制

// main.js
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters.permissions
    if (!permissions.includes(value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 组件中使用
<button v-permission="'user:delete'">删除用户</button>

按钮级权限控制

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

// 全局混入
Vue.mixin({
  methods: {
    $can(permission) {
      return this.$store.getters.permissions.includes(permission)
    }
  }
})

// 模板中使用
<button v-if="$can('user:edit')">编辑</button>

API 请求权限控制

在请求拦截器中添加权限校验：

vue实现操作权限控制

// axios拦截器
service.interceptors.request.use(config => {
  if (config.requireAuth && !store.getters.token) {
    return Promise.reject(new Error('无访问权限'))
  }
  return config
})

权限数据存储

建议使用Vuex管理权限数据，典型store结构：

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  }
})

动态菜单生成

根据权限过滤导航菜单：

computed: {
  filteredMenus() {
    return this.allMenus.filter(menu => {
      return !menu.meta?.permission || this.$can(menu.meta.permission)
    })
  }
}

实现时需注意权限数据应在前端做缓存，同时后端必须进行二次验证。权限标识建议采用模块:操作的命名规范（如user:delete）。对于复杂系统，可考虑使用RBAC（基于角色的访问控制）模型进行权限设计。