当前位置：首页 > VUE

vue element 实现权限

2026-01-15 22:10:00VUE

权限控制实现方式

在Vue项目中使用Element UI实现权限控制通常涉及前端路由权限和界面元素权限两部分。以下是常见的实现方法：

路由权限控制

基于用户角色动态生成可访问路由列表，通过路由守卫进行拦截：

// router/index.js
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!hasToken) {
      next('/login')
    } else {
      if (hasPermission(to.meta.roles)) {
        next()
      } else {
        next('/403')
      }
    }
  } else {
    next()
  }
})

function hasPermission(roles) {
  const currentRoles = store.getters.roles
  return roles.some(role => currentRoles.includes(role))
}

界面元素权限控制

使用自定义指令v-permission控制Element UI组件的显示：

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

    if (value && value instanceof Array) {
      const hasPermission = roles.some(role => {
        return value.includes(role)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限数组，如v-permission="['admin']"`)
    }
  }
})

权限按钮使用示例

在模板中使用v-permission指令控制按钮显示：

<el-button 
  v-permission="['admin']"
  type="primary"
  @click="handleEdit">
  编辑
</el-button>

<el-button 
  v-permission="['admin', 'editor']"
  type="danger"
  @click="handleDelete">
  删除
</el-button>

菜单权限实现

根据用户权限动态生成侧边栏菜单：

// utils/permission.js
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

权限数据管理

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

// store/modules/permission.js
const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

动态路由添加

在用户登录后动态添加权限路由：

// views/login.vue
this.$store.dispatch('user/login', this.loginForm)
  .then(() => {
    this.$store.dispatch('permission/generateRoutes', this.roles)
      .then(accessedRoutes => {
        router.addRoutes(accessedRoutes)
        next({ ...to, replace: true })
      })
  })

以上实现方案结合了Vue Router、Vuex和自定义指令，可以灵活控制路由访问权限和界面元素显示权限。实际项目中可根据具体需求调整权限校验逻辑。

vue element 实现权限