当前位置：首页 > VUE

vue权限如何实现

2026-02-18 10:44:23VUE

Vue 权限实现方案

在 Vue 项目中实现权限控制通常涉及前端路由权限、按钮权限和接口权限。以下是几种常见方案：

路由权限控制

方案一：动态路由表 通过后端返回用户权限路由表，前端动态生成路由。使用 router.addRoutes 方法添加权限路由。

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

方案二：路由守卫拦截 在全局路由守卫中检查权限元信息（meta）：

router.beforeEach((to, from, next) => {
  const hasPermission = store.getters.roles.some(role => 
    to.meta.roles.includes(role)
  )
  hasPermission ? next() : next('/403')
})

按钮级权限控制

自定义指令方案 创建 v-permission 指令控制按钮显示：

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

组件封装方案 创建权限组件包裹需要控制的内容：

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

<script>
export default {
  props: ['permission'],
  computed: {
    checkPermission() {
      return this.$store.getters.permissions.includes(this.permission)
    }
  }
}
</script>

接口权限控制

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

axios.interceptors.request.use(config => {
  const token = store.getters.token
  const role = store.getters.role
  config.headers['X-Access-Token'] = token
  config.headers['X-Role'] = role
  return config
})

数据权限控制

前端数据过滤 根据权限过滤返回的数据：

function filterData(data, permission) {
  return data.filter(item => 
    permission.includes(item.accessLevel)
  )
}

权限存储方案

Vuex 状态管理 使用 Vuex 集中管理权限数据：

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