vue操作权限管理实现

Vue 权限管理实现方法

基于路由的权限控制

在 Vue 项目中，可以通过路由守卫来实现权限控制。在路由配置中为每个路由添加 meta 字段，定义需要的权限。

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/user',
    component: UserPage,
    meta: { requiresAuth: true, roles: ['user', 'admin'] }
  }
]

在全局前置守卫中检查用户权限：

router.beforeEach((to, from, next) => {
  const userRole = store.getters.userRole
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!userRole) {
      next('/login')
    } else if (to.matched.some(record => record.meta.roles.includes(userRole))) {
      next()
    } else {
      next('/403')
    }
  } else {
    next()
  }
})

基于指令的权限控制

创建自定义指令来控制元素的显示：

Vue.directive('permission', {
  inserted: function(el, binding, vnode) {
    const userRoles = vnode.context.$store.getters.userRoles
    if (!userRoles.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

在模板中使用：

<button v-permission="'admin'">管理员按钮</button>

基于组件的权限控制

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

const Permission = {
  functional: true,
  render: function(createElement, context) {
    const userRoles = context.parent.$store.getters.userRoles
    const requiredRoles = context.props.roles
    if (requiredRoles.some(role => userRoles.includes(role))) {
      return context.slots().default
    }
    return null
  }
}

注册并使用：

Vue.component('Permission', Permission)

<permission :roles="['admin']">
  <button>管理员专属按钮</button>
</permission>

动态菜单生成

根据用户权限动态生成菜单：

computed: {
  filteredRoutes() {
    return this.$router.options.routes.filter(route => {
      return !route.meta || 
             !route.meta.roles || 
             route.meta.roles.includes(this.$store.getters.userRole)
    })
  }
}

在模板中渲染过滤后的路由：

<nav>
  <router-link 
    v-for="route in filteredRoutes" 
    :key="route.path" 
    :to="route.path"
  >
    {{ route.name }}
  </router-link>
</nav>

API 请求权限控制

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

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

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    store.dispatch('logout')
    router.push('/login')
  }
  return Promise.reject(error)
})

状态管理集成

在 Vuex 中管理权限状态：

const store = new Vuex.Store({
  state: {
    user: null,
    roles: []
  },
  mutations: {
    setUser(state, { user, roles }) {
      state.user = user
      state.roles = roles
    },
    clearUser(state) {
      state.user = null
      state.roles = []
    }
  },
  actions: {
    login({ commit }, credentials) {
      return api.login(credentials).then(response => {
        commit('setUser', {
          user: response.data.user,
          roles: response.data.roles
        })
      })
    },
    logout({ commit }) {
      commit('clearUser')
    }
  },
  getters: {
    hasRole: state => role => {
      return state.roles.includes(role)
    }
  }
})

按钮级别权限控制

创建权限混入：

export default {
  methods: {
    $can(permission) {
      return this.$store.getters.userPermissions.includes(permission)
    }
  }
}

在组件中使用：

import permissionMixin from './permissionMixin'

export default {
  mixins: [permissionMixin],
  methods: {
    deleteItem() {
      if (this.$can('delete')) {
        // 执行删除操作
      }
    }
  }
}