当前位置：首页 > VUE

vue权限管理如何实现

2026-02-22 08:48:23VUE

路由权限控制

通过动态路由配置实现权限管理，利用Vue Router的addRoutes方法动态添加路由。在用户登录后获取权限列表，筛选出有权限的路由并动态加载。在路由守卫beforeEach中校验用户是否有目标路由的访问权限。

// 示例：动态路由添加
const asyncRoutes = [
  { path: '/admin', component: Admin, meta: { roles: ['admin'] }},
  { path: '/user', component: User, meta: { roles: ['user', 'admin'] }}
]

router.beforeEach((to, from, next) => {
  const hasPermission = checkUserPermission(to.meta.roles)
  hasPermission ? next() : next('/403')
})

组件级权限控制

使用自定义指令v-permission实现组件级别的权限控制。指令内部校验用户权限，无权限时移除DOM元素或禁用交互。

vue权限管理如何实现

// 注册权限指令
Vue.directive('permission', {
  inserted(el, binding) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 使用方式
<button v-permission="'user.delete'">删除</button>

接口权限验证

在axios拦截器中统一处理API请求权限。请求头携带token，服务器端验证权限后返回数据或错误信息。无权限的请求可被提前拦截。

vue权限管理如何实现

// 请求拦截器示例
axios.interceptors.request.use(config => {
  config.headers.Authorization = getToken()
  return config
})

// 响应拦截器处理权限错误
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      router.push('/403')
    }
    return Promise.reject(error)
  }
)

权限数据存储

采用Vuex集中管理权限状态。存储用户角色、权限列表等信息，并提供校验方法。结合持久化插件如vuex-persistedstate实现登录状态保持。

// Vuex store示例
const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, payload) {
      state.permissions = payload
    }
  },
  getters: {
    hasPermission: state => permission => {
      return state.permissions.includes(permission)
    }
  }
})

按钮级权限控制

通过全局方法或组件混入实现按钮显隐控制。在模板中使用方法判断是否渲染按钮，比指令方式更灵活地处理复杂权限逻辑。

// 全局方法实现
Vue.prototype.$hasPermission = function(permission) {
  return this.$store.getters.hasPermission(permission)
}

// 模板中使用
<button v-if="$hasPermission('user.edit')">编辑</button>