动态加载权限管理模块中的Vue组件

this.postRequest('/login', {
  username: this.loginForm.username,
  password: this.loginForm.password
}).then(resp=> {
  if (resp && resp.status == 200) {
  var data = resp.data;
  _this.$store.commit('login', data.msg);
  var path = _this.$route.query.redirect;
  _this.$router.replace({path: path == '/' || path == undefined "htmlcode">

export default new Vuex.Store({
 state: {
  user: {
   name: window.localStorage.getItem('user' || '[]') == null "htmlcode">

[
  {
    "id": 2,
    "path": "/home",
    "component": "Home",
    "name": "员工资料",
    "iconCls": "fa fa-user-circle-o",
    "children": [
      {
        "id": null,
        "path": "/emp/basic",
        "component": "EmpBasic",
        "name": "基本资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/emp/adv",
        "component": "EmpAdv",
        "name": "高级资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  }
]


前端在拿到这个字符串之后，做两件事：1.将json动态添加到当前路由中;2.将数据保存到store中，然后各页面根据store中的数据来渲染菜单。
核心思路并不难，下面我们来看看实现步骤。
数据请求时机


这个很重要。
可能会有小伙伴说这有何难，登录成功之后请求不就可以了吗？是的，登录成功之后，请求菜单资源是可以的，请求到之后，我们将之保存在store中，以便下一次使用，但是这样又会有另外一个问题，假如用户登录成功之后，点击某一个子页面，进入到子页面中，然后按了一下F5进行刷新，这个时候就GG了，因为F5刷新之后store中的数据就没了，而我们又只在登录成功的时候请求了一次菜单资源，要解决这个问题，有两种思路：1.将菜单资源不要保存到store中，而是保存到localStorage中，这样即使F5刷新之后数据还在；2.直接在每一个页面的mounted方法中，都去加载一次菜单资源。
由于菜单资源是非常敏感的，因此最好不要不要将其保存到本地，故舍弃方案1，但是方案2的工作量有点大，因此我采取办法将之简化，采取的办法就是使用路由中的导航守卫。
路由导航守卫


我的具体实现是这样的，首先在store中创建一个routes数组，这是一个空数组，然后开启路由全局守卫，如下：


router.beforeEach((to, from, next)=> {
  if (to.name == 'Login') {
   next();
   return;
  }
  var name = store.state.user.name;
  if (name == '未登录') {
   if (to.meta.requireAuth || to.name == null) {
    next({path: '/', query: {redirect: to.path}})
   } else {
    next();
   }
  } else {
   initMenu(router, store);
   next();
  }
 }
)


这里的代码很短，我来做一个简单的解释： 


1.如果要去的页面是登录页面，这个没啥好说的，直接过。
2.如果不是登录页面的话，我先从store中获取当前的登录状态，如果未登录，则通过路由中meta属性的requireAuth属性判断要去的页面是否需要登录，如果需要登录，则跳回登录页面，同时将要去的页面的path作为参数传给登录页面，以便在登录成功之后跳转到目标页面，如果不需要登录，则直接过（事实上，本项目中只有Login页面不需要登录）；如果已经登录了，则先初始化菜单，再跳转。
初始化菜单的操作如下：


export const initMenu = (router, store)=> {
 if (store.state.routes.length > 0) {
  return;
 }
 getRequest("/config/sysmenu").then(resp=> {
  if (resp && resp.status == 200) {
   var fmtRoutes = formatRoutes(resp.data);
   router.addRoutes(fmtRoutes);
   store.commit('initMenu', fmtRoutes);
  }
 })
}
export const formatRoutes = (routes)=> {
 let fmRoutes = [];
 routes.forEach(router=> {
  let {
   path,
   component,
   name,
   meta,
   iconCls,
   children
  } = router;
  if (children && children instanceof Array) {
   children = formatRoutes(children);
  }
  let fmRouter = {
   path: path,
   component(resolve){
    if (component.startsWith("Home")) {
     require(['../components/' + component + '.vue'], resolve)
    } else if (component.startsWith("Emp")) {
     require(['../components/emp/' + component + '.vue'], resolve)
    } else if (component.startsWith("Per")) {
     require(['../components/personnel/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sal")) {
     require(['../components/salary/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sta")) {
     require(['../components/statistics/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sys")) {
     require(['../components/system/' + component + '.vue'], resolve)
    }
   },
   name: name,
   iconCls: iconCls,
   meta: meta,
   children: children
  };
  fmRoutes.push(fmRouter);
 })
 return fmRoutes;
}


在初始化菜单中，首先判断store中的数据是否存在，如果存在，说明这次跳转是正常的跳转，而不是用户按F5或者直接在地址栏输入某个地址进入的。否则就去加载菜单。拿到菜单之后，首先通过formatRoutes方法将服务器返回的json转为router需要的格式，这里主要是转component，因为服务端返回的component是一个字符串，而router中需要的却是一个组件，因此我们在formatRoutes方法中动态的加载需要的组件即可。数据格式准备成功之后，一方面将数据存到store中，另一方面利用路由中的addRoutes方法将之动态添加到路由中。
菜单渲染


最后，在Home页中，从store中获取菜单json，渲染成菜单即可，相关代码可以在Home.vue中查看，不赘述。
OK，如此之后，不同用户登录成功之后就可以看到不同的菜单了。