vue element 实现权限

Vue + Element UI 实现权限控制

路由权限控制

1. 定义路由元信息 在路由配置中添加 meta 字段标记权限标识：

   {
   path: '/admin',
   component: AdminPage,
   meta: { requiresAuth: true, permission: 'admin' }
   }

2. 全局路由守卫 通过 beforeEach 钩子进行拦截：

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

动态菜单生成

1. 过滤有权限的路由

   const filterRoutes = (routes, permissions) => {
   return routes.filter(route => {
    if (route.meta && route.meta.permission) {
      return permissions.includes(route.meta.permission)
    }
    return true
   })
   }

2. 侧边栏菜单渲染 在导航组件中结合 el-menu 动态渲染：

   <el-menu :router="true">
   <template v-for="item in allowedRoutes">
    <el-submenu v-if="item.children" :index="item.path">
      <template #title>{{ item.meta.title }}</template>
      <el-menu-item 
        v-for="child in item.children" 
        :key="child.path" 
        :index="child.path"
      >
        {{ child.meta.title }}
      </el-menu-item>
    </el-submenu>
    <el-menu-item v-else :index="item.path">
      {{ item.meta.title }}
    </el-menu-item>
   </template>
   </el-menu>

按钮级权限控制

1. 自定义指令实现 创建 v-permission 指令：

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

2. 组件中使用指令

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

API 权限拦截

1. 请求拦截器配置 在 axios 拦截器中验证权限：

   axios.interceptors.request.use(config => {
   const requiredPermission = config.headers['X-Required-Permission']
   if (requiredPermission && !store.getters.permissions.includes(requiredPermission)) {
    return Promise.reject(new Error('无访问权限'))
   }
   return config
   })

权限数据管理

1. Vuex 存储方案

   const store = new Vuex.Store({
   state: {
    permissions: []
   },
   mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
   },
   actions: {
    async fetchPermissions({ commit }) {
      const res = await getPermissionsAPI()
      commit('SET_PERMISSIONS', res.data)
    }
   }
   })

页面元素动态显示

1. 函数式权限判断

   methods: {
   hasPermission(permission) {
    return this.$store.getters.permissions.includes(permission)
   }
   }

2. 模板中使用

   

   <el-tab-pane v-if="hasPermission('report:view')" label="报表"></el-tab-pane>

注意事项

1. 权限标识应保持唯一性，建议采用 模块:操作 的命名方式
2. 后端接口必须同步进行权限验证
3. 初始加载时应先获取用户权限数据
4. 无权限访问时应当返回 403 页面而非直接隐藏路由
5. 生产环境建议配合 JWT 等认证机制使用