当前位置：首页 > VUE

权限管理vue如何实现

2026-02-09 18:07:53VUE

权限管理实现方法

在Vue中实现权限管理通常涉及前端路由控制、按钮级权限和API请求拦截。以下是几种常见的实现方式：

基于路由的权限控制

使用Vue Router的全局前置守卫beforeEach进行路由拦截，结合用户角色或权限列表过滤可访问路由：

// router.js
router.beforeEach((to, from, next) => {
  const hasPermission = checkUserPermission(to.meta.requiredPermission)
  if (hasPermission) {
    next()
  } else {
    next('/forbidden')
  }
})

动态生成路由菜单时，根据权限过滤路由配置：

function filterRoutes(routes, permissions) {
  return routes.filter(route => {
    if (route.meta && route.meta.permissions) {
      return permissions.some(perm => route.meta.permissions.includes(perm))
    }
    return true
  })
}

指令式按钮权限控制

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

权限管理vue如何实现

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

    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

模板中使用方式：

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

组合式API权限检查

在Vue 3中可以使用组合式函数封装权限逻辑：

权限管理vue如何实现

// usePermission.js
import { computed } from 'vue'
import { useStore } from 'vuex'

export function usePermission() {
  const store = useStore()
  const hasPermission = (permission) => {
    return computed(() => store.getters.permissions.includes(permission))
  }

  return { hasPermission }
}

组件内使用：

const { hasPermission } = usePermission()
const canEdit = hasPermission('article:edit')

权限数据存储方案

将权限数据存储在Vuex或Pinia中：

// store/modules/auth.js
export default {
  state: {
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  },
  getters: {
    hasPermission: (state) => (permission) => {
      return state.permissions.includes(permission)
    }
  }
}

服务端验证配合

前端权限控制需与后端API验证配合：

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