vue项目实现权限管理

Vue 项目权限管理实现方法

路由权限控制

使用 Vue Router 的导航守卫（navigation guards）进行路由权限验证。在路由配置中添加 meta 字段，标记该路由所需的权限。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      meta: { requiresAuth: true, roles: ['admin'] }
    }
  ]
})

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

组件级权限控制

创建自定义指令 v-permission 来控制组件显示/隐藏。

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const { value } = binding
    const roles = store.getters.roles

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = roles.some(role => value.includes(role))

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('需要指定权限数组')
    }
  }
})

按钮级权限控制

封装权限按钮组件，根据权限决定是否渲染按钮。

<template>
  <button v-if="hasPermission">{{ text }}</button>
</template>

<script>
export default {
  props: {
    permission: {
      type: Array,
      required: true
    },
    text: String
  },
  computed: {
    hasPermission() {
      return this.$store.getters.roles.some(role => 
        this.permission.includes(role)
      )
    }
  }
}
</script>

权限数据管理

使用 Vuex 集中管理权限状态。

const store = new Vuex.Store({
  state: {
    user: null,
    roles: []
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.roles = user.roles || []
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const user = await api.login(credentials)
      commit('SET_USER', user)
    }
  },
  getters: {
    roles: state => state.roles
  }
})

动态路由加载

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

const asyncRoutes = [
  {
    path: '/admin',
    component: Layout,
    children: [
      {
        path: 'dashboard',
        component: Dashboard,
        meta: { roles: ['admin'] }
      }
    ]
  }
]

function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

const accessedRoutes = filterRoutes(asyncRoutes, store.getters.roles)
router.addRoutes(accessedRoutes)

权限 API 集成

与后端 API 集成获取权限数据。

import axios from 'axios'

export default {
  async getPermissions() {
    const response = await axios.get('/api/user/permissions')
    return response.data
  },
  async checkPermission(permission) {
    const response = await axios.post('/api/permission/check', { permission })
    return response.data.hasPermission
  }
}

错误页面处理

配置权限不足时的错误页面。

const router = new VueRouter({
  routes: [
    {
      path: '/403',
      component: Error403
    }
  ]
})

以上方法可以根据项目需求组合使用，构建完整的权限管理系统。实际实现时需要考虑与后端API的对接、权限数据的缓存策略以及用户体验等问题。