系统管理前端开发-02

Posted 2022-06-01 qq628b229e2808e

登陆之后加载菜单和后台关联问题

加载菜单方案选择

• 在使用过程中有这样一个问题，vue-element-admin 的菜单列表是通过遍历路由进行渲染的，由前端定义，可以在 router.js 中看到相关代码，其实路由也是菜单。
• 好处是我们不用重复定义菜单列表信息和路由之间的绑定了；但是我们的菜单信息想通过服务端进行动态输出来达到权限控制的效果就不是那么容易了。
• 现在很多解决方案是由服务端输出完整的 vue-element-admin 路由信息并进行绑定，这样虽然能达到动态菜单的效果，但是给服务端也造成了不必要的烦恼。
• 作为服务端开发：不关心菜单对应的是哪个 vue 里面的 component ，也不希望将菜单的格式限定得那么严格，甚至不关心菜单的图标是什么，只需要严格按照服务端的要求显示或隐藏菜单即可。
• 为了解决这个问题，我的优化方案如下，服务端只需控制菜单显示或隐藏，路由信息定义都在前端写死，这样达到完美的前后端分离要求。

方案概述

• 所有的路由地址由后端提供，异步渲染。
• 所有路由前端提供，后台提供数据确定前端哪些路径 (菜单) 隐藏 (不挂载)

市面上普遍存在的是第一种方案, 在这里我选用第二种方式。

• 原因: 作为服务端开发：不关心 菜单对应的是哪个 vue 里面的 component ，也不希望将菜单的格式限定得那么严格，甚至不关心菜单的图标是什么，只需要严格按照服务端的要求显示或隐藏菜单即可。

开始修改

定义路由

在 src/router/index.js 中将 constantRoutes 常量中定义的侧边栏显示的菜单信息删除掉；修改 asyncRoutes常量写入菜单信息，asyncRoutes 中每个节点都有 name 属性，通过它来和服务端返回的菜单信息进行关联。

服务端接口

修改用户Api请求

src/api/ 目录下的 user.js 添加如下接口

// 加载菜单信息
export function getMenus() 
  return request(
    url: '/login/getMenus',
    method: 'get'
  )

配置store调用

创建 src/store/modules/menu.js

import  asyncRoutes, constantRoutes, lastRoute  from '@/router/index'
import  getMenus  from '@/api/user'
const state = 
  routes: []


const mutations = 
  SET_ROUTES: (state, routes) => 
    state.routes = routes
  


// 动态菜单还是定义在前端，后台只会返回有权限的菜单列表，通过遍历服务端的菜单数据，没有的将对于菜单进行隐藏
// 这样的好处是服务端无需返回前端菜单相关结构，并且菜单显示又可以通过服务端来控制，进行菜单的动态控制
// 前端新增页面也无需先通过服务端进行菜单添加，遵循了前后端分离原则
function generateRoutes(routes, srvMenus) 
  for (let i = 0; i < routes.length; i++) 
    const routeItem = routes[i]
    var showItem = false
    for (let j = 0; j < srvMenus.length; j++) 
      const srvItem = srvMenus[j]

      // 前后端数据通过 serPath 属性来匹配
      if (routeItem.name !== undefined && routeItem.name === srvItem.serPath && srvItem.show === true) 
        showItem = true
        routes[i]['hidden'] = false
        break
      
    
    if (showItem === false) 
      routes[i]['hidden'] = true
    

    if (routeItem['children'] !== undefined && routeItem['children'].length > 0) 
      generateRoutes(routes[i]['children'], srvMenus)
    
  


const actions = 
  getMenus( commit , roles) 
    return new Promise(resolve => 
      // 查询所端的菜单数据
      getMenus(state.token).then(async function(res) 
        const srvMenus = res.data
        var pushRouter = asyncRoutes
        generateRoutes(pushRouter, srvMenus)
        const routeArr = []
        routeArr.push(...constantRoutes)
        routeArr.push(...pushRouter)
        routeArr.push(...lastRoute)
        commit('SET_ROUTES', routeArr)
        resolve(pushRouter)
      )
    )
  


export default 
  namespaced: true,
  state,
  mutations,
  actions

修改 store/getters.js

动态渲染菜单修改​​src/permission.js​​

登陆测试, 发现菜单不显示

修改加载菜单取数据的参数, 修改 src/layout/components/Sidebar/index.vue

因为现在动态路由数据是存在到我们自己定义的 VUEX 里面，所以要改, 修改完登陆加载就可以了, 修改数据库测试下

刷新页面, 发现没有检查管理了