当前位置：首页 > VUE

vue怎么实现权限分配

2026-02-22 04:51:25VUE

Vue 权限分配实现方法

在 Vue 中实现权限分配通常涉及前端路由控制、界面元素显隐控制和后端接口权限验证。以下是几种常见的实现方式：

基于路由的权限控制

通过 Vue Router 的导航守卫实现路由级别的权限控制，未授权用户无法访问特定路由。

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles // 假设从Vuex获取用户角色
  const requiredRoles = to.meta.roles // 路由元信息中定义需要的角色

  if (requiredRoles && !requiredRoles.some(role => userRoles.includes(role))) {
    next('/forbidden') // 无权限则跳转到禁止访问页面
  } else {
    next()
  }
})

动态路由生成

根据用户权限动态生成可访问的路由表，通常与后端配合实现。

// 从后端获取权限路由表
api.getAuthRoutes().then(routes => {
  const accessedRoutes = filterAsyncRoutes(routes) // 过滤出有权限的路由
  router.addRoutes(accessedRoutes) // 动态添加路由
})

function filterAsyncRoutes(routes) {
  return routes.filter(route => {
    if (hasPermission(route.meta.roles)) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children)
      }
      return true
    }
    return false
  })
}

组件级权限控制

创建自定义指令控制界面元素的显示/隐藏，实现按钮级别的权限控制。

Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.getters.permissions // 从Vuex获取权限列表

    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el) // 无权限则移除元素
    }
  }
})

使用方式：

<button v-permission="'user:add'">添加用户</button>

权限数据存储方案

推荐使用 Vuex 集中管理权限数据，确保状态一致性。

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    },
    SET_ROLES(state, roles) {
      state.roles = roles
    }
  },
  actions: {
    async getPermission({ commit }) {
      const { roles, permissions } = await api.getPermission()
      commit('SET_ROLES', roles)
      commit('SET_PERMISSIONS', permissions)
    }
  }
})

后端接口权限验证

即使前端实现了权限控制，仍需后端进行最终验证，防止绕过前端检查。

// 示例API请求拦截器
axios.interceptors.request.use(config => {
  const token = store.getters.token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
})

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      // 处理无权限情况
    }
    return Promise.reject(error)
  }
)