vue权限管理实现

Vue 权限管理实现方案

基于路由的动态权限控制

在router/index.js中定义静态路由和动态路由，通过addRoute方法动态添加路由。结合后端返回的权限标识过滤路由表：

// 示例：过滤动态路由
function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children, roles)
      }
      return true
    }
    return false
  })
}

全局权限指令实现

创建v-permission自定义指令，用于控制DOM元素的显示/隐藏：

// directives/permission.js
export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = permissions.some(perm => {
        return value.includes(perm)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
}

按钮级权限控制

在组件中使用权限判断方法控制按钮显示：

<template>
  <button v-if="checkPermission(['admin'])">管理员按钮</button>
</template>

<script>
export default {
  methods: {
    checkPermission(perms) {
      return this.$store.getters.permissions.some(p => perms.includes(p))
    }
  }
}
</script>

菜单权限过滤

根据用户权限过滤导航菜单数据：

// utils/permission.js
export function filterMenus(menus, permissions) {
  return menus.filter(menu => {
    if (menu.meta && menu.meta.permissions) {
      return menu.meta.permissions.some(p => permissions.includes(p))
    }
    return true
  })
}

权限数据持久化

使用vuex-persistedstate插件保持权限状态：

// store/index.js
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  plugins: [createPersistedState({
    key: 'auth',
    paths: ['permissions', 'roles']
  })]
})

接口权限拦截

在axios拦截器中验证API权限：

// utils/request.js
service.interceptors.request.use(config => {
  const permission = store.getters.permissions
  if (config.url.includes('/admin/') && !permission.includes('admin')) {
    return Promise.reject(new Error('无权限访问'))
  }
  return config
})

权限初始化流程

在应用入口文件完成权限初始化：

// main.js
router.beforeEach(async (to, from, next) => {
  if (!store.getters.permissions.length) {
    const { permissions } = await store.dispatch('user/getInfo')
    const accessRoutes = await store.dispatch('permission/generateRoutes', permissions)
    router.addRoutes(accessRoutes)
    next({ ...to, replace: true })
  } else {
    next()
  }
})

权限数据格式示例

建议的权限数据结构：

{
  "roles": ["editor"],
  "permissions": ["article:edit", "user:view"],
  "menus": [
    {
      "path": "/articles",
      "meta": { "permissions": ["article:view"] }
    }
  ]
}