vue-admin-template 记录 自定义路由及自定义侧边栏的实现

本人作为后台开发人员，研究前端框架花费了不少时间，所以边研究边记录整理，以便回头能翻阅复习，也顺便能给广大后端开发者们一个可参考的资料。

后台本人使用的C#开发语言，用WebApi做后台框架。

目录

1.登录

2.获取菜单（侧边栏及生成路由）

---

1.登录

登录界面如果不需要自定义的话，不需要过多的修改，从 界面 至 modules，再到 api 都已经设计好了；

此处 是表单验证成功后，调用 store/modules 中的 user.js 里边的login方法

 handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('user/login', this.loginForm).then(() => {
              this.$router.push({
                path: this.redirect || '/'
              })

              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

  再来看user.js 里边的代码，按自己后台的规则去组装数据，username 和password 就是界面传过来的表单数据了。 此处有引用 api/user.js里边的方法 。顾名思义，api文件夹中就是专门定义访问后台接口的方法

 login({
    commit
  }, userInfo) {
    const {
      username,
      password
    } = userInfo

    const qs = require('qs')
    var m_psw = md5.hex_md5_32(userInfo.password)

    return new Promise((resolve, reject) => {
      login(qs.stringify({
        Account: userInfo.username,
        PassWord: m_psw
      })).then(response => {
        const {
          data
        } = response
        //console.log(data)
        if (data.MsgSuccessed) {
          var token = data.MsgContent
          commit('SET_TOKEN', token)
          setToken(token)
          resolve()
        } else {
          reject(data.MsgDes)
        }
      }).catch(error => {
        //console.log(error)
        reject(error)
      })
    })
  }

export function login(data) {
  return request({
    url: 'UserLogin/Login',
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: data
  })
}

至此 登录的方法就已经完成了，登录后跳转的界面就自行处理了，login.vue中实现。

2.获取菜单（侧边栏及生成路由）

通过api去访问后台，获取到菜单数据，后台的菜单数据结构不用限制，获取数据后再由前端去做数据结构转换都行，或者直接后台按前端需要的格式返回也可以，看开发者去决定。

代码在 src/permission.js 中  ，其中会进行用户数据有无的判断，我在获取用户数据接口后，增加了一个    获取用户菜单的方法调用   await store.dispatch('menu/getMenus')

具体实现 就在 src/store/modules 里边添加了一个menu.js的文件，记得要在store/index.js 里边导入一下才能正常调用。

还有就是 api里边也需要添加 menu.js，用于定义访问后台接口的方法

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import menu from './modules/menu'
import dictdata from './modules/dictdata.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    menu,
    dictdata
  },
  getters
})

router.beforeEach(async (to, from, next) => {
  try{
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({
        path: '/'
      })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo')
          //获取用户菜单
          await store.dispatch('menu/getMenus')
          next({
            ...to,
            replace: true
          })
        } catch (error) {
          console.log(error)
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
  }catch(ex){
    console.log(error)
  }
  
})

定义好接口方法之后，就从后台返回数据开始，组装路由需要的数据结构

组装好之后，添加路由及赋值给侧边栏

       router.addRoutes(rs)   //定义路由
       router.options.routes = rs  //侧边栏数据

至此，动态加载就已经完成了

getMenus() {
    return new Promise((resolve, reject) => {
      getMenuByLogin().then(res => {
        //console.log('开始获取菜单')
        var m_data = res.data
        if (m_data.MsgSuccessed) {
          var menudata = m_data.MsgContent
          var rs = []

          //先加个首页
          rs.push({
            path: '/',
            component: Layout,
            redirect: '/dashboard',
            children: [{
              path: 'dashboard',
              name: '首页',
              component: () => import('@/views/dashboard/index'),
              meta: {
                title: '首页',
                icon: 'el-icon-s-home'
              }
            }]
          })

          //后台返回的菜单数据，进行循环，开始组装数据
          menudata.forEach((m, index) => {
            //拼装一下 Children 赋值给 m_r
            var m_r = []
            m.Children.forEach((c, i) => {
              m_r.push({
                path: c.MenuCode,
                name: c.MenuCode,
                component: () => modulePath(c.MenuURL),
                //component: () => import('@/views/personalcenter/personalinfo/index'),
                meta: {
                  title: c.MenuName,
                  icon: c.MenuIcon
                }
              })
            })
            //再定义菜单根数据
            var r = {
              path: m.MenuURL,
              component: Layout,
              redirect: m.MenuURL,
              name: m.MenuCode,
              alwaysShow: true,
              meta: {
                title: m.MenuName,
                icon: m.MenuIcon
              },
              children: m_r
            }
            //加到数组中
            rs.push(r)
          })
          //最后再加个404页面
          rs.push({
            path: '*',
            redirect: '/404',
            hidden: true
          })
          //添加到路由表中
          router.addRoutes(rs)
          //侧边栏数据也别忘了赋值
          router.options.routes = rs

          resolve()
        }
      })

    })

  }