使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题...

如今前后端分离是大势所趋，笔者虽然是做后台的，但也不得不学学前端的流行框架VUE -_-||| 。

为了学习VUE，笔者搭建了一个简单的用户后台，以此来了解VUE的开发思路(注：本项目不用于实际开发，只是为了学习，本文重点在于vue的动态路由添加，动态权限以及页面处理的一些小问题)。

一、项目组成

　　VUE 2.6.11 + axios +VueX + ElementUI 2.13.2 

二、整体思路

　　1.  用户登录后，获取菜单数据，用以显示菜单。

　　2.  用户登录后，后台获取Vue路由数据，用以动态添加到VueRouter中。

　　3.  用户登录后，从后台获取用户的权限，用以控制用户是否对某一功能具有可操作权限。

三、具体实现

·　  1.  登录。由于本人学习重点是使用VUE动态添加路由、菜单显示和权限控制，所以登录页面没有做具体功能，点击登录按钮就表示登录成功了。

　　    由于登录页是用户的第一界面，不存在任何权限问题，所以笔者就直接将登录页的路由直接写在了VueRouter实例中。如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
  path: '/Login',
  name: 'Login',
  component: () => import('../views/Login.vue')
}]

export function initRouter() {
  return new VueRouter({
    routes
  })
}

export default initRouter()

　　用户通过 http://localhost:8080/#/login 可访问到登陆页面：

       点击登录按钮表示登录成功！

　　登录成功后的处理：

　　(1)向后台发请求拿到路由数据并存入VueX的state中，并通过addRoutes(routerObjArr)动态添加到路由实例中。注：后台返回的数据结构需跟route相一致，如图：

　　前端所需数据结构：

　　

　　后台返回的数据结构：

　　

 　　细节处理：由于后台返回的component字段是个组件地址字符串，这就需要将后台返回的route数据 一 一 做处理，通过import() 方法动态的加载组件，然后将返回的compoent对象重新赋值到component字段上。如图：

　　

　　代码：

const _import = require('@/router/_import_' + process.env.NODE_ENV) //获取组件的方法
/**将router的json字符串中的component转换为组件对象 */
export function filterAsyncRouter(asyncRouterMap) {
  if (!asyncRouterMap) return [];

  function _iter(before) {
    const after = Object.assign({}, before)
    if (after.component) {
      after.component = _import(after.component);
    }
    if (after.children && after.children.length) {
      after.children = filterAsyncRouter(after.children);
    }
    return after
  }

  return asyncRouterMap.map(_iter)

}

 　　图中所用的import方法，根据生产环境不同，引用不同的文件，如图：

　　

 　　各自