轻松使用vue+element-ui进行权限管理和菜单动态渲染

前端

2023-12-29 18:14:45

前言

在现代化软件开发中，权限管理是一个必不可少的模块。它可以帮助我们控制用户对不同资源的访问权限，从而确保系统的安全性和可用性。而vue和element-ui是目前前端开发中非常流行的两个框架，它们可以帮助我们轻松构建出各种复杂的前端应用。

使用vue+element-ui实现权限管理和菜单动态渲染

1. 项目地址

https://github.com/cgq001/vue-admin

欢迎star，留着也许就用到了，毕竟权限管理还是还是很普遍的嘛。

2. 使用到的规则

1. 动态设置权限的UI展示

2. 将侧边导航

3. 实现步骤

1. 在Vue项目中安装element-ui

npm install element-ui -S

2. 在main.js文件中引入element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在项目中创建一个权限管理模块

// src/store/modules/permission.js
import { fetchMenu } from '@/api/menu'

const state = {
  // 侧边导航栏菜单数据
  menuList: []
}

const mutations = {
  SET_MENU_LIST: (state, menuList) => {
    state.menuList = menuList
  }
}

const actions = {
  async fetchMenu({ commit }) {
    const res = await fetchMenu()
    commit('SET_MENU_LIST', res.data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4. 在项目中创建一个菜单渲染组件

// src/components/Sidebar/index.vue
<template>
  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
    <el-menu-item v-for="item in menuList" :index="item.path" :key="item.path">
      <template #title>
        <span>{{ item.name }}</span>
      </template>
      <template #icon>
        <i :class="item.icon"></i>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('permission', ['menuList']),
    activeMenu() {
      return this.$route.path
    }
  },
  methods: {
    handleOpen(index) {
      console.log(index)
    },
    handleClose(index) {
      console.log(index)
    }
  }
}
</script>

5. 在项目中创建一个权限管理页面

// src/views/permission/index.vue
<template>
  <div>
    <el-button type="primary" @click="fetchMenu">获取菜单</el-button>
    <sidebar></sidebar>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('permission', ['fetchMenu'])
  }
}
</script>