当前位置：首页 > VUE

vue前端实现权限

2026-02-11 02:32:27VUE

Vue前端权限实现方案

在Vue项目中实现权限控制通常需要结合后端API和前端路由管理，以下是几种常见的实现方式：

路由级权限控制

通过路由守卫实现页面访问权限，在router.beforeEach中校验用户权限：

router.beforeEach((to, from, next) => {
  const requiredAuth = to.meta.requiresAuth
  const userRoles = store.getters.roles

  if (requiredAuth && !userRoles) {
    next('/login')
  } else if (requiredAuth && !hasPermission(userRoles, to.meta.roles)) {
    next('/403')
  } else {
    next()
  }
})

路由配置中添加权限元信息：

{
  path: '/admin',
  component: AdminPanel,
  meta: { roles: ['admin'] }
}

组件级权限控制

使用自定义指令实现按钮/组件级别的权限控制：

Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.getters.roles

    if (value && !hasPermission(roles, value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

使用方式：

<button v-permission="['admin']">删除</button>

动态菜单生成

根据用户权限动态生成可访问的菜单：

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

API请求拦截

在axios拦截器中添加权限校验：

axios.interceptors.request.use(config => {
  const token = store.getters.token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

权限数据存储

使用Vuex管理权限状态：

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  }
})