当前位置：首页 > VUE

vue权限怎么实现

2026-01-16 07:32:20VUE

Vue 权限实现方案

基于路由的权限控制

在路由配置中为每个路由添加 meta 字段，定义所需权限。使用路由守卫 beforeEach 进行权限校验。

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

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles
  if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
    next('/forbidden')
  } else {
    next()
  }
})

动态路由加载

根据用户权限动态生成可访问的路由表，通过 router.addRoutes 添加。

// 过滤有权限的路由
function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

// 添加动态路由
const accessedRoutes = filterRoutes(asyncRoutes, roles)
router.addRoutes(accessedRoutes)

组件级权限控制

创建自定义指令 v-permission，用于控制组件显示。

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

按钮级权限控制

封装权限判断函数，结合计算属性控制按钮显示。

// utils/permission.js
export function checkPermission(permissions) {
  const currentPermissions = store.getters.permissions
  return currentPermissions.some(permission => permissions.includes(permission))
}

// 组件中使用
computed: {
  hasEditPermission() {
    return checkPermission(['edit'])
  }
}

API 请求权限控制

在请求拦截器中添加权限验证，无权限的请求直接拒绝。

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

权限数据管理

使用 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
  }
}

以上方案可根据实际项目需求组合使用，建议在路由层级做好主要权限控制，组件和按钮级权限作为补充。权限数据应来自后端接口，前端只负责展示逻辑。

vue权限怎么实现