vue权限怎么实现

权限实现方案

Vue中实现权限控制通常分为前端路由权限和页面元素权限两部分。以下是常见的实现方法：

路由权限控制

通过路由守卫和动态路由实现页面访问权限：

// router.js
router.beforeEach((to, from, next) => {
  const hasPermission = checkUserPermission(to.meta.requiresAuth)
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!hasPermission) {
      next({ path: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

动态路由添加

根据用户权限动态生成可访问路由表：

// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children, roles)
      }
      return true
    }
    return false
  })
}

指令式权限控制

使用自定义指令控制DOM元素显示：

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

组件级权限控制

创建权限校验组件封装逻辑：

<template>
  <div v-if="checkPermission()">
    <slot />
  </div>
</template>

<script>
export default {
  props: ['permission'],
  methods: {
    checkPermission() {
      return this.$store.getters.permissions.includes(this.permission)
    }
  }
}
</script>

权限数据管理

建议将权限数据存储在Vuex中统一管理：

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

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

按钮级权限控制

结合v-if或自定义指令实现按钮显示控制：

<button v-if="$store.getters.permissions.includes('user:add')">添加用户</button>

<button v-permission="'user:delete'">删除用户</button>

接口权限验证

前端需要配合后端接口权限校验：

// api拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = getToken()
  }
  return config
})

权限数据初始化

建议在用户登录后立即获取权限数据：

// login.vue
login().then(res => {
  const { permissions } = res.data
  this.$store.commit('SET_PERMISSIONS', permissions)
  this.$router.push('/')
})

以上方案可根据实际项目需求组合使用，建议将权限控制逻辑集中管理，避免分散在代码各处。