前端权限控制-基于vue-router的动态路由实现

Posted 2023-04-30

参考技术A 在中后台应用系统开发中，大部分情况下会涉及到用户权限控制，除了后端做权限验证外，前端在用户访问时也需要基于用户权限做相应控制。针对前端使用vue框架的情况，对页面一级的权限控制，常规处理是在页面导航栏通过控制导航显隐控制权限，但在浏览器地址栏输入访问路径依然可以访问，可以用vue-router的动态路由来实现权限控制。

登录成功后通过addRoutes更新路由配置

正常情况下这样就可以实现动态路由控制了，但刷新页面发现会出现404，因为刷新时vue实例重新初始化了，导致动态路由被还原成默认路由，此时需要将权限码存储在本地，在main.js中根据权限码重新生成动态路由

以上步骤基本可以实现动态添加路由并在刷新页面是维持路由状态，但访问根路径会始终跳转到登录页，无法默认跳转到首页，这个问题目前还未想到好的解决方案。

vue-router 根据权限动态设置路由 theme.js" as it exceeds the max of "500KB".

需求: 根据不同角色的登录人,展示不同的功能模块. 前端路由在后台维护,动态注册路由.

流程:

　　首先,登录成功,获取token

　　其次,通过在请求头携带当前登录人的token,调取module的接口

axios(‘module.list‘).then(res => {
  if (res.data.status === 200) {
    this.moduleList = res.data.res;
  }  
})

 

　　接着,处理数据格式,主要是component的格式是,例如: import(`@view/user/${item.path}`)

　　　　

this.newAddRouter = this.moduleList.map(item => {
    return {
       code: item.code,
　　　　icon: item.iconUrl,
　　　　name: item.routerPath,
　　　　path: item.routerPath,
　　　　title: item.name,
　　　　id: item.id,
　　　　component: () => import(`@/views/tv/tv-nine/${item.path}`), // 正确的写法
　　   // component: () => import(`${item.path}`), // 报错 theme.js" as it exceeds the max of "500KB".
　　
　　　　parentId: item.parentId, 

　　　　children: []
　　
　　}; 

});

此处省略递归处理

　　

　　最后,通过this.addroutes()注册动态路由　　

this.$router.addroutes(newAddRouter);
注: 由于我们的需求是在登录成功后才根据登录人的角色动态生成模块,而router是在vue实例化的时候就已经注册挂载,所以,官方提供了一个动态的注册的api,它就是addroutes.