vue权限如何实现

Vue 权限实现方案

路由权限控制

通过动态路由实现权限过滤，根据用户角色或权限列表生成可访问的路由表。

使用router.beforeEach全局守卫进行路由拦截：

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

动态添加路由示例：

// 过滤有权限的路由
const filteredRoutes = asyncRoutes.filter(route => {
  return hasPermission(route.meta.roles)
})
router.addRoutes(filteredRoutes)

组件级权限控制

自定义指令v-permission实现按钮级权限控制：

Vue.directive('permission', {
  inserted(el, binding) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

使用方式：

<button v-permission="'user:create'">创建用户</button>

状态管理集成

Vuex中存储权限信息，便于全局访问：

state: {
  roles: [],
  permissions: []
},
mutations: {
  SET_PERMISSIONS(state, permissions) {
    state.permissions = permissions
  }
}

API权限控制

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

axios.interceptors.request.use(config => {
  if (config.requireAuth && !store.getters.hasPermission) {
    return Promise.reject(new Error('无访问权限'))
  }
  return config
})

权限数据格式

建议采用树形结构存储权限关系：

{
  "id": "user:manage",
  "children": [
    {"id": "user:create"},
    {"id": "user:delete"}
  ]
}

缓存策略

权限变更后需清除缓存并刷新页面：

logout() {
  localStorage.removeItem('permissions')
  router.go(0)
}

服务端配合

前端应配合服务端进行二次验证，所有敏感操作需后端进行最终权限校验。

动态菜单实现

根据权限数据生成导航菜单：

computed: {
  menuItems() {
    return this.allMenus.filter(menu => 
      this.$store.getters.hasPermission(menu.permission)
    )
  }
}