当前位置：首页 > VUE

vue操作权限实现

2026-02-20 06:28:16VUE

Vue 权限控制实现方法

基于路由的权限控制

在路由配置中通过 meta 字段添加权限标识，结合路由守卫进行拦截：

// router.js
const routes = [
  {
    path: '/admin',
    component: AdminPage,
    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')
    } else {
      next()
    }
  } else {
    next()
  }
})

指令式权限控制

创建自定义指令控制元素显示：

// 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)
      }
    }
  }
})

// 使用方式
<button v-permission="['admin']">删除</button>

组件级权限控制

封装权限校验组件：

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

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

// 使用方式
<permission :required="['admin']">
  <admin-panel />
</permission>

API 请求权限控制

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

axios.interceptors.request.use(config => {
  const token = store.getters.token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 403) {
    router.push('/403')
  }
  return Promise.reject(error)
})

动态菜单生成

根据权限动态生成可访问菜单：

vue操作权限实现

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