当前位置：首页 > VUE

前端vue实现不同权限

2026-01-21 05:12:20VUE

权限控制实现方案

在Vue项目中实现权限控制通常涉及路由权限、页面元素权限和API权限三个层面。以下是常见的实现方法：

路由权限控制

基于用户角色或权限动态生成可访问路由表。在路由守卫中进行权限校验：

// router/index.js
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  const userRole = getUserRole() // 获取用户角色

  if (to.meta.requiresAuth && !hasToken) {
    next('/login')
  } else if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/403') // 无权限页面
  } else {
    next()
  }
})

动态菜单生成

根据权限数据动态生成侧边栏菜单：

前端vue实现不同权限

// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    } else {
      return true
    }
  })
}

组件级权限控制

创建自定义指令控制按钮级权限：

// directives/permission.js
Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.getters.permissions

    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

使用方式：

前端vue实现不同权限

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

权限数据管理

建议使用Vuex集中管理权限状态：

// store/modules/permission.js
const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

API权限控制

在请求拦截器中添加权限验证：

// utils/request.js
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)