vue权限控制如何实现

Vue权限控制实现方法

基于路由的权限控制 通过路由守卫拦截未授权访问，结合用户角色动态生成可访问路由表。在router.beforeEach中校验用户权限，使用addRoutes动态挂载权限路由。

// 路由配置示例
const routes = [
  { path: '/admin', component: Admin, meta: { requiresAuth: true, roles: ['admin'] } }
]

// 路由守卫
router.beforeEach((to, from, next) => {
  const hasToken = getToken()
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!hasToken) {
      next('/login')
    } else if (!checkUserRole(to.meta.roles)) {
      next('/403')
    } else {
      next()
    }
  } else {
    next()
  }
})

组件级权限控制 使用自定义指令v-permission控制组件显示，或在组件内通过方法判断权限状态。

// 注册全局指令
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.getters.roles
    if (value && !roles.some(role => value.includes(role))) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

// 模板中使用
<button v-permission="['admin']">管理员按钮</button>

API请求权限控制 在axios拦截器中添加权限验证，对无权限的请求进行拦截或重定向。

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

权限数据管理 使用Vuex集中管理权限状态，包含用户角色、权限列表等数据，提供权限验证方法。

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

按钮级权限控制 结合计算属性或方法实现按钮显示控制，适用于细粒度权限场景。

// 组件内方法
methods: {
  checkPermission(permission) {
    return this.$store.getters.permissions.includes(permission)
  }
}

// 模板中使用
<button v-if="checkPermission('user:delete')">删除</button>

动态菜单生成 根据权限数据递归生成导航菜单，只显示有权限访问的菜单项。

// 过滤有权限的菜单
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
    }
  })
}