当前位置：首页 > VUE

前端vue实现不同权限

2026-02-21 20:43:39VUE

权限控制方案

在Vue中实现权限控制通常采用路由守卫和动态路由结合的方式。通过用户角色或权限标识，控制页面访问和功能展示。

路由权限配置

定义路由时添加meta字段标记所需权限，例如管理员权限标记为admin：

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true, roles: ['admin'] }
  }
]

路由守卫拦截

全局前置守卫中检查用户权限，无权限时重定向到登录页或403页面：

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles
  if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
    next('/forbidden')
  } else {
    next()
  }
})

动态路由加载

根据用户权限异步加载路由表，使用router.addRoutes动态注册：

// 过滤有权限的路由
function filterRoutes(allRoutes, userRoles) {
  return allRoutes.filter(route => {
    return !route.meta?.roles || route.meta.roles.some(role => userRoles.includes(role))
  })
}

组件级权限控制

通过自定义指令v-permission控制按钮级权限：

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

权限数据管理

使用Vuex集中管理权限状态，典型store模块结构：

const authModule = {
  state: () => ({
    roles: [],
    permissions: []
  }),
  mutations: {
    SET_ROLES(state, roles) {
      state.roles = roles
    }
  }
}

接口权限验证

所有API请求需携带权限token，后端应校验每个接口的访问权限：

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = getToken()
  return config
})

权限指令扩展

可扩展权限指令支持多种权限逻辑，如任一权限通过或全部权限通过：

Vue.directive('permission', {
  inserted(el, binding) {
    const { value, modifiers } = binding
    const hasPermission = checkPermission(value, modifiers)
    if (!hasPermission) el.style.display = 'none'
  }
})

权限变更处理

用户登出或权限变更时需重置路由和权限状态：

前端vue实现不同权限

function resetPermission() {
  store.commit('RESET_STATE')
  router.matcher = new Router().matcher
  router.addRoutes(filterRoutes(asyncRoutes, []))
}