【Springboot+Vue】做一个权限管理后台（七）：动态加载后台菜单

效果演示

数据库设计

每一个用户都有一个用户id，为了对他们进行后台菜单的动态设计，即每个用户看到的的菜单是不一样的，那么我们就要为每一个用户规定一个角色，这就引入了role表，通过user_role的表建立联系。

同样的，每个角色看到不用的菜单，菜单由后端根据登录的角色向数据库查询生成，这就引入了menu表，用过role_menu的表建立联系。

我们插入几个数据：

path：代表前端路由的访问路径
component：代表前端路由所在的组件位置

前端设计

• 用户登录返回用户的角色id，存储在vuex中

  login(){
       
            var params = {
       
                username:this.username,
                password:this.password
            }
            this.$store.commit('setUserName',this.username)
            post('user/login',params).then(res => {
       
                this.$store.commit('setUserToken',res.token) //将返回的token存储在vuex中
                this.$store.commit('setUserRole',res.rid)
                this.$router.replace('/admin')
            })
        }
  

• 格式化后端返回的路由

  当用户选择进入后台的时候，我们先要初始化后台的菜单，在main.js中写入：

  router.beforeEach((to, from, next) => {
       
    if (store.state.username && (to.name == 'adminDashboard')) {
       
      axios.get('/user/getAuth').then(resp => {
       
        initAdminMenu(router, store)
      })
    }
    if (to.meta.requireAuth) {
       
      axios.get('/user/getAuth').then(result => {
       
        if (result.data.code === 200) {
       
          next()
        } else {
       
          alert("您还未登录")
          next({
       
            path: '/login'
          })
        }
      })
    } else {
       
      next()
    }
  }
  )
  

  initAdmin.js方法如下：

  import {
       get} from '@/utils/http'
  import {
       formatRoutes} from '@/utils/routerFormat'
  export default function initAdminMenu(router, store) {
       
      if (store.state.adminMenus.length > 0) {
       
        return
      }
      
      get('/menu/get/' + store.state.rid).then(resp => {
       
          var fmtRoutes = formatRoutes(resp)
          router.addRoutes(fmtRoutes)
          store.commit('initAdminMenu', fmtRoutes)
      })
    }
  

  routerFormat.js方法如下：

  export function  formatRoutes(routes){
       
      let fmtRoutes = []
      routes.forEach(routes => {
       
        if (routes.child) {
       
          routes.child = formatRoutes(routes.child)
        }
    
        let fmtRoute = {
       
          path: routes.path,
          component: resolve => {
       
            require(['@/components/admin/' + routes.component + '.vue'], resolve)
          },
          name: routes.name,
          nameZh: routes.name_zh,
          iconCls: routes.icon,
          children: routes.child
        }
        fmtRoutes.push(fmtRoute)
      })
      return fmtRoutes
    }
  

• Vuex设置存储

  import Vue from 'vue'
  import Vuex from 'vuex'
   
  Vue.use(Vuex)
  const key = 'user'
  const store