vue实现权限

Vue 实现权限控制的常见方法

基于路由的权限控制

在 Vue 项目中，可以使用路由守卫（navigation guards）来控制用户访问权限。在路由配置中为每个路由添加 meta 字段，定义访问该路由所需的权限。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: AdminPanel,
      meta: { requiresAuth: true, roles: ['admin'] }
    }
  ]
})

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

组件级权限控制

创建自定义指令 v-permission，用于控制组件显示。在全局注册该指令，根据用户权限决定是否渲染组件。

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

// 使用方式
<button v-permission="'user:create'">创建用户</button>

动态菜单生成

根据用户权限动态生成可访问的菜单列表。在 Vuex 中存储用户权限信息，通过计算属性过滤出有权限访问的菜单项。

computed: {
  accessibleMenus() {
    const allMenus = this.$store.state.menus
    const userPermissions = this.$store.state.user.permissions
    return allMenus.filter(menu => {
      return !menu.permission || userPermissions.includes(menu.permission)
    })
  }
}

API 请求权限控制

在请求拦截器中检查权限，没有权限的请求直接拒绝。结合后端 API 返回的 403 状态码处理无权限情况。

axios.interceptors.request.use(config => {
  const requiredPermission = config.meta?.permission
  if (requiredPermission && !store.getters.hasPermission(requiredPermission)) {
    return Promise.reject(new Error('无权限访问'))
  }
  return config
})

权限数据管理

使用 Vuex 集中管理权限数据，包括用户角色、权限列表等。通过 getters 提供权限检查方法。

const store = new Vuex.Store({
  state: {
    user: {
      roles: [],
      permissions: []
    }
  },
  getters: {
    hasPermission: state => permission => {
      return state.user.permissions.includes(permission)
    }
  }
})

按钮级权限控制

创建权限检查混合（mixin），在组件中复用权限检查逻辑。对于按钮等细粒度权限控制特别有用。

const permissionMixin = {
  methods: {
    checkPermission(permission) {
      return this.$store.getters.hasPermission(permission)
    }
  }
}

// 使用方式
<template>
  <button v-if="checkPermission('user:delete')">删除</button>
</template>

权限初始化流程

在用户登录成功后，获取并存储权限数据。通常在应用初始化时从服务器获取权限信息。

async login() {
  const res = await api.login(this.form)
  this.$store.commit('SET_USER', res.data.user)
  this.$store.commit('SET_PERMISSIONS', res.data.permissions)
  this.$router.push('/')
}