vue前端实现权限

Vue 前端权限实现方案

路由权限控制

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

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

动态生成路由表时，根据用户权限过滤路由配置：

function filterRoutes(allRoutes, userPermissions) {
  return allRoutes.filter(route => {
    return userPermissions.includes(route.meta.permission)
  })
}

组件级权限控制

创建自定义指令 v-permission 控制组件显示：

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

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

在模板中使用：

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

API 请求权限控制

在请求拦截器中检查权限：

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

权限数据管理

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

const store = new Vuex.Store({
  state: {
    permissions: []
  },
  mutations: {
    setPermissions(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    async fetchPermissions({ commit }) {
      const res = await getPermissions()
      commit('setPermissions', res.data)
    }
  }
})

按钮级权限组件

创建权限组件封装逻辑：

Vue.component('Permission', {
  props: {
    value: {
      type: [String, Array],
      required: true
    }
  },
  render() {
    const hasPermission = checkPermission(this.value)
    return hasPermission ? this.$slots.default : null
  }
})

使用方式：

<permission :value="'user:edit'">
  <button>编辑用户</button>
</permission>

权限工具函数

实现通用的权限检查方法：

function checkPermission(requiredPermission, userPermissions) {
  if (Array.isArray(requiredPermission)) {
    return requiredPermission.some(perm => 
      userPermissions.includes(perm)
    )
  }
  return userPermissions.includes(requiredPermission)
}

初始化流程

用户登录后获取权限并初始化：

async function initPermission() {
  await store.dispatch('fetchPermissions')
  const accessedRoutes = filterRoutes(asyncRoutes, store.state.permissions)
  router.addRoutes(accessedRoutes)
}

权限数据结构示例

后端返回的权限数据格式建议：

{
  "permissions": [
    "user:create",
    "user:read",
    "user:update",
    "role:assign"
  ]
}

错误处理

无权限访问的统一处理：

router.onError(error => {
  if (error.message.includes('Permission denied')) {
    router.push('/forbidden')
  }
})

动态菜单实现

根据权限生成导航菜单：

computed: {
  menuItems() {
    return this.allMenuItems.filter(item => 
      this.$store.getters.hasPermission(item.permission)
    )
  }
}