当前位置：首页 > VUE

vue实现前端权限

2026-03-29 06:54:14VUE

Vue 前端权限实现方案

前端权限控制通常分为路由权限和功能权限两部分，以下是常见的实现方法：

路由权限控制

动态路由方案 通过用户登录后获取的权限数据动态生成可访问路由表，使用 router.addRoutes 方法添加权限路由：

// 在路由守卫中处理动态路由
router.beforeEach(async (to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (hasToken) {
    if (to.path === '/login') {
      next('/')
    } else {
      const hasRoles = store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          const { roles } = await store.dispatch('user/getInfo')
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    /* 无token处理逻辑 */
  }
})

路由元信息控制 在路由配置中使用 meta 字段标记权限要求：

{
  path: '/admin',
  component: Layout,
  meta: {
    roles: ['admin']
  }
}

功能权限控制

指令式权限控制 创建自定义指令 v-permission 控制元素显示：

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)
      }
    }
  }
})

组件式权限控制 创建权限校验组件：

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

<script>
export default {
  props: {
    permission: {
      type: Array,
      required: true
    }
  },
  methods: {
    checkPermission() {
      return this.permission.some(item => this.$store.getters.roles.includes(item))
    }
  }
}
</script>

权限数据管理

权限数据结构示例 典型后端返回的权限数据结构：

{
  "roles": ["admin"],
  "permissions": [
    "user:add",
    "user:delete"
  ],
  "menus": [
    "/dashboard",
    "/user/list"
  ]
}

Vuex 存储方案 在 Vuex 中管理权限状态：

const state = {
  roles: [],
  permissions: []
}

const mutations = {
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  SET_PERMISSIONS: (state, permissions) => {
    state.permissions = permissions
  }
}

按钮级权限控制

方法封装方案 创建权限校验方法：

export function checkPermission(permission) {
  const currentPermissions = store.getters.permissions
  return currentPermissions.includes(permission)
}

使用示例

<el-button 
  v-if="checkPermission('user:add')"
  type="primary"
  @click="handleAdd"
>新增用户</el-button>

权限更新处理

权限刷新逻辑 当用户权限变更时需要重新加载权限数据：

vue实现前端权限

async function refreshPermissions() {
  try {
    const { roles, permissions } = await getUserInfo()
    store.commit('SET_ROLES', roles)
    store.commit('SET_PERMISSIONS', permissions)
    const accessRoutes = await generateRoutes(roles)
    resetRouter()
    router.addRoutes(accessRoutes)
  } catch (error) {
    console.error(error)
  }
}