当前位置：首页 > VUE

vue实现后台权限管理

2026-01-21 23:25:37VUE

Vue 实现后台权限管理的方法

路由权限控制

通过动态路由实现权限过滤，在用户登录后根据角色或权限列表生成可访问的路由表。使用 Vue Router 的 addRoutes 方法动态添加路由。

// 示例：过滤异步路由表
const 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 实现按钮显隐控制，在全局注册指令并校验权限码。

// 注册全局指令
Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.getters.permissions
    if (!permissions.includes(value)) {
      el.parentNode.removeChild(el)
    }
  }
})

API 请求拦截

在 axios 拦截器中校验接口权限，无权限的请求直接拦截并提示。

axios.interceptors.request.use(config => {
  if (!hasApiPermission(config.url)) {
    return Promise.reject(new Error('无访问权限'))
  }
  return config
})

权限数据存储

使用 Vuex 集中管理权限数据，包括角色列表、权限码、菜单树等。通过 getters 提供快捷访问方法。

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  getters: {
    hasPermission: state => code => {
      return state.permissions.includes(code)
    }
  }
})

菜单动态渲染

根据权限树递归生成导航菜单，结合 vue-router 的路由元信息（meta）控制菜单可见性。

// 菜单过滤示例
function filterMenus(menus) {
  return menus.filter(menu => {
    if (menu.meta && menu.meta.roles) {
      return checkRole(menu.meta.roles)
    }
    return true
  }).map(menu => {
    if (menu.children) {
      menu.children = filterMenus(menu.children)
    }
    return menu
  })
}