打造全新升级的小爱ADMIN：Vue-cli3+Mockjs 助力后台管理权限与三级菜单功能

2023-09-10 22:32:17

前言

近段时间，我对小爱ADMIN后台管理系统进行了全面的革新，不仅对页面布局和样式进行了重新设计，还新增了系统权限功能。此外，为了提升系统的扩展性和灵活性，我将原有的左侧菜单升级为三级菜单。

系统权限功能实现

系统权限功能是后台管理系统不可或缺的一部分，它能够帮助管理员对系统中的用户进行权限管理，从而确保系统的安全性和可靠性。为了实现这一功能，我使用了Vuex来管理系统的状态，并根据用户的角色信息动态地生成可访问的菜单和页面。

// Vuex store中定义state
const state = {
  roles: [], // 用户角色信息
  menus: [] // 可访问的菜单
}

// 根据角色信息过滤菜单
const getAccessibleMenus = (roles, menus) => {
  const accessibleMenus = []
  for (const menu of menus) {
    if (menu.roles.some(role => roles.includes(role))) {
      accessibleMenus.push(menu)
    }
  }
  return accessibleMenus
}

// mutations
const setRoles = (state, roles) => {
  state.roles = roles
}

const setMenus = (state, menus) => {
  state.menus = menus
}

// actions
const fetchRoles = async ({ commit }) => {
  const { data: roles } = await axios.get('/api/roles')
  commit('setRoles', roles)
}

const fetchMenus = async ({ commit }) => {
  const { data: menus } = await axios.get('/api/menus')
  const accessibleMenus = getAccessibleMenus(state.roles, menus)
  commit('setMenus', accessibleMenus)
}

三级菜单显示

为了实现三级菜单的显示，我使用了嵌套路由的方式，并在组件中使用<router-view>来渲染子组件。这样，当点击父菜单时，子菜单就会在子组件中显示。

// routes.js
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'user-management',
        component: UserManagement
      },
      {
        path: 'role-management',
        component: RoleManagement
      }
    ]
  }
]

// Dashboard.vue
<template>
  <div>
    <router-view />
  </div>
</template>

// UserManagement.vue
<template>
  <div>用户管理</div>
</template>

// RoleManagement.vue
<template>
  <div>角色管理</div>
</template>