当前位置：首页 > VUE

vue怎么实现权限管理

2026-02-24 07:47:53VUE

Vue权限管理实现方案

权限管理通常分为路由权限和功能权限两部分，以下是常见实现方式：

路由权限控制

通过路由守卫实现动态路由添加和访问控制：

vue怎么实现权限管理

// router/index.js
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.meta.requiresAuth && !hasToken) {
    next('/login')
  } else {
    // 已登录且尝试访问登录页时重定向
    if (to.path === '/login' && hasToken) {
      next('/dashboard')
    } else {
      // 动态添加路由
      if (!router.options.routes.some(r => r.path === to.path)) {
        const asyncRoutes = generateRoutes(userRole)
        router.addRoutes(asyncRoutes)
        next({ ...to, replace: true })
      } else {
        next()
      }
    }
  }
})

功能权限控制

使用自定义指令或组件封装权限判断逻辑：

// main.js
Vue.directive('permission', {
  inserted(el, binding) {
    const permissions = store.getters.permissions
    if (!permissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

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

权限数据存储

结合Vuex管理权限状态：

vue怎么实现权限管理

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

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

后端配合

前端需与后端API配合完成完整权限验证：

登录接口返回用户权限标识
路由配置接口返回可访问路由表
每个功能请求需携带权限token

动态菜单渲染

根据权限数据生成导航菜单：

computed: {
  permission_routes() {
    return this.$store.state.permission.routes
  }
},
methods: {
  hasPermission(route) {
    return route.meta && route.meta.roles 
      ? route.meta.roles.includes(this.role)
      : true
  }
}