vue前端路由控制说明

vue前端路由控制说明

前言

项目中用户所能看到的模块、页面是通过权限和路由控制的，所以这次说明一下前端是如何控制路由的跳转和权限的判断。

准备阶段

1、首先在router配置文件中配置好sicap所有模块的路由，eg:

01.{
02.    path: '/OperationCenter',
03.    component: Home,
04.    children: [{path: '', name: 'operationCenter', component: () => import(<a>'@/home/BaseComponent'</a>)}],
05.    meta: {
06.      name: '运维中心'
07.    }
08.  }

说明：component:中的import([url=]’@/home/BaseComponent’[/url])是各个模块首页可以进入的集合文件，该文件通过$roter中的name属性就可以跳到相应的模块，包括特殊页面的判断也在这个文件中做判断。
2、然后就是给每个模块配置相信的子路由，运用vue的嵌套路由方法 children编写就可以。

权限判断

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

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

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

路径隐藏
permission.js点击页面刷新时隐藏路径

01.window.location.hash = getRandomPath(route.fullPath)

这就是项目中前端路由控制的说明，如果点击按钮发现提示 “您的权限不足，请联系管理员”，前端同事就得看后台是否返回相应的路由模块的keyword，然后再看下路由集合里有没有跳转的地址。