当前位置：首页 > VUE

vue怎么实现权限

2026-02-17 20:58:24VUE

Vue 权限实现方法

路由权限控制

通过路由守卫实现权限控制，在 router.beforeEach 中检查用户权限，动态生成可访问的路由表。结合 addRoutes 动态添加路由。

router.beforeEach((to, from, next) => {
  if (hasToken()) {
    if (to.path === '/login') {
      next('/')
    } else {
      if (hasPermission(to.meta.roles)) {
        next()
      } else {
        next('/403')
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})

按钮级权限控制

使用自定义指令 v-permission 控制按钮显示，在全局注册指令，根据权限判断是否渲染元素。

vue怎么实现权限

Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const roles = store.getters.roles
    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = roles.some(role => value.includes(role))
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('需要指定权限数组')
    }
  }
})

菜单权限控制

从后端获取权限菜单数据，前端根据返回数据递归生成菜单组件。使用 vuex 存储权限信息，通过 getters 获取过滤后的菜单。

// 获取菜单数据
async getMenus() {
  const { data } = await getMenuList()
  const accessedRoutes = filterAsyncRoutes(data)
  commit('SET_ROUTES', accessedRoutes)
}

接口权限控制

在请求拦截器中添加权限验证，检查请求接口是否需要特定权限。对于无权限的请求直接拒绝并提示。

vue怎么实现权限

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

权限数据存储

使用 vuex 集中管理权限状态，包括角色、权限列表等信息。通过模块化组织权限相关状态和操作。

const permission = {
  state: {
    roles: [],
    routes: []
  },
  mutations: {
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_ROUTES: (state, routes) => {
      state.routes = routes
    }
  }
}

权限验证函数

封装权限验证工具函数，提供角色检查、权限匹配等方法。通过位运算或数组比对实现高效权限验证。

function checkPermission(needRoles, userRoles) {
  if (needRoles.includes('*')) return true
  return needRoles.some(role => userRoles.includes(role))
}