vue项目中的路由跳转说明

前言
项目中用户所能看到的模块、页面是通过权限和路由控制的，所以这次说明一下前端是如何控制路由的跳转和权限的判断。
如果点击按钮提示 “您的权限不足，请联系管理员”，前端同事需要注意以下三点：
a: 通过 permission.js里的router.beforeEach方法确定路由地址是否正确
b: 配置路由的keyword是否和后台传过来的一致
c: sysPermission.js文件中concatRouters方法打印routers这个集合，看是否含有该跳转路由

准备阶段
1、首先在router配置文件中配置好项目模块的路由，eg:

{
    path: '/NetworkBulletin',
    component: 'Home',
    children: [
      {
        path: '',
        name: 'networkBulletin',
        component: 'safetyBulletin/safetyBulletin-netWorkBulletin'
      }
    ],
    meta: {
      name: '网络安全保障'
    }
  },

说明：component:中的 模块名/模块首页，该文件通过$roter中的name属性就可以跳到相应的模块，包括特殊页面的判断也在这个文件中做判断。
2、然后就是给每个模块配置相信的子路由，运用vue的嵌套路由方法 children编写就可以。
注：以及模块路由的name一定要和子路由对象的名字一致，否则找不到

routers.map((item) => {
        if (item.hasOwnProperty('children')) {
          let arr = SecondRouterObj[item.children[0].name] || []
          if (arr.length > 0) {
            arr = filterAsyncRouter(arr);
          }
          for (let i = 0; i < arr.length; i++) {
            let name = (arr[i].name || arr[i].children[0].name) || ''
            if (keyNameList.indexOf(name) > -1 || name.indexOf('AUTH-TRUE') > -1) {
              item.children.push(arr[i])
            }
          }
        }
      })

权限判断
1、首先需要和后台确定该登录用户所具有的权限，用户登录成功以后会返回一级页面权限的集合，前端会把结果存放在状态管理机制vuex中，为避免用户刷新页面丢失权限数据，我们会将这个文件刷新时重新请求一次，然后就是比较，从前端的路由集合里过滤出该用户的所具有的权限路径。

 // 过滤懒加载路由
        let routers = asyncRouter.filter((item) => {
          for (let i = 0; i < firstMenu.length; i++) {
            if (!item.hasOwnProperty('children') || item.children[0].name === firstMenu[i].keyWord) {
              if (item.hasOwnProperty('children')) {
                item.meta.uuid = firstMenu[i].uuid
              }
              return item
            }
          }
        })

路由守卫
vue-router提供了导航钩子:beforeEach和afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。
a、to:即将要进入的目标路由对象；
b、from:当前导航即将要离开的路由对象；
c、next ：调用该方法后，才能进入下一个钩子函数（afterEach）
前面提到用户登录时已经过滤出相应的路由集合，点击跳转如果在集合里有对应的地址，则next()跳转，否则当访问的页面路由不存在或错误时，$router中的name属性会返回404，我们会提示‘您账号权限不足，请联系管理员！’，像电视墙、问卷调查、邮件审批等页面不需要登录的情况下就可以访问的页面，只需在钩子函数中特殊处理即可。

特殊页面
因为不同角色看到的首页也不一样，所以需要再过滤路由的时候改变该路由的component

// 依据角色不同进入的首页不同
export function changeComponent() {
  let userData = store.state.sysPermission.userData;
  let asyncRouter = store.state.sysPermission.asyncRouter;
  asyncRouter.forEach(v => {
    if (userData.roleName.indexOf('系统管理员') !== -1 && userData.roleName.indexOf('安全通报管理员') === -1 && userData.roleName.indexOf('安全通报普通用户') === -1) { // 安全通报主页面
      if (v.path === '/NetworkBulletin' || v.path === '/InformationBulletin') {
        v.children[0].component = getModuleByName('safetyBulletin')['netWork-typeset'] // 系统管理员
      }
    }
  })
  return asyncRouter
}