vue实现权限控制路由(vue-router 动态添加路由)
用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。
思路如下:
一、定义初始化默认路由。
二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配。
三、通过匹配,把匹配好的路由数据addRoutes到路由中。
四、为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由。
具体代码如下:
router.js
importVuefrom'vue' import{router}from'./index' importloginfrom'@/views/login/login' importlayoutfrom'@/views/layout/layout' importhomefrom'@/views/home/home.vue' importdepDsStorageListfrom'@/views/home/homePage1/depDsStorageList.vue' //数据管理 importdataSourceAdminfrom'@/views/dataManage/dataSourceAdmin/dataSourceAdmin' importdataPoolAdminfrom'@/views/dataManage/dataPoolAdmin/dataPoolAdmin' importbuildSqlTablefrom'@/views/dataManage/buildSqlTable/buildSqlTable' importcomplianceDetectionFunctionfrom'@/views/dataManage/complianceDetectionFunction/complianceDetectionFunction' importtablePreviewfrom'@/views/dataManage/dataSourceAdmin/tablePreview/tablePreview.vue' importdataAssetsManagefrom'@/views/dataManage/dataAssetsManage/dataAssetsManage.vue' //标准管理 importcodeItemManagefrom'@/views/standardManage/codeItemManage/codeItemManage' importmetadataManagefrom'@/views/standardManage/metadataManage/metadataManage' importstandardFileManagefrom'@/views/standardManage/standardFileManage/standardFileManage' importdeterminerManagefrom'@/views/standardManage/determinerManage/determinerManage' //数据服务 importdataServiceAdminfrom'@/views/dataService/dataServiceAdmin/dataServiceAdmin.vue' importcustomizedServiceAdminfrom'@/views/dataService/customizedServiceAdmin/customizedServiceAdmin.vue' //系统管理 importlabelManagefrom'@/views/systemManage/labelManage/labelManage.vue' importroleMenufrom'@/views/systemManage/role-menu/role-menu.vue' importuserAdminfrom'@/views/systemManage/user-admin/user-admin.vue' importroleAdminfrom'@/views/systemManage/role-admin/role-admin.vue' //权限 importhaveNoAuthorityfrom'@/views/systemManage/NoAuthority/haveNoAuthority' importhaveNotFoundfrom'@/views/systemManage/NoAuthority/haveNotFound' //初始化默认路由 exportletinitMenu=[ {path:'',redirect:'/login'}, { path:'/login', name:'login', component:login }, { path:'/haveNoAuthority', name:'haveNoAuthority', component:haveNoAuthority }, { path:'/haveNotFound', name:'haveNotFound', component:haveNotFound }, { path:'', redirect:'/depDsStorageList', component:layout, children:[ { path:'depDsStorageList', name:'首页内容列表', component:depDsStorageList, }, ], }, { path:'', redirect:'addDataService', component:layout, children:[ { path:'addDataService', name:'新增数据服务', component:()=>import('@/views/dataService/dataServiceAdmin/addDataService.vue'), }, ], }, { path:'', redirect:'/dataPoolAdmin', component:layout, children:[ { path:'dataPoolAdmin', name:'数据池管理', component:dataPoolAdmin }, ], }, { path:'', redirect:'/tablePreview', component:layout, children:[ { path:'tablePreview', name:'表关系预览', component:tablePreview }, ], }, ] //动态配置路由 exportletmenu={ "首页":{ path:'', redirect:'/home', component:layout, children:[ { path:'home', name:'首页', component:home, } ], }, "标准数据服务":{ path:'', redirect:'/dataServiceAdmin', component:layout, children:[ { path:'dataServiceAdmin', name:'标准数据服务', component:dataServiceAdmin, } ], }, "定制数据服务":{ path:'', redirect:'/customizedServiceAdmin', component:layout, children:[ { path:'customizedServiceAdmin', name:'定制数据服务', component:customizedServiceAdmin, } ], }, "数据源管理":{ path:'', redirect:'/dataSourceAdmin', component:layout, children:[ { path:'dataSourceAdmin', name:'数据源管理', component:dataSourceAdmin, } ], }, "数据资产管理":{ path:'', redirect:'/dataAssetsManage', component:layout, children:[ { path:'dataAssetsManage', name:'数据资产管理', component:dataAssetsManage, } ], }, "标签管理":{ path:'', redirect:'/labelManage', component:layout, children:[ { path:'labelManage', name:'标签管理', component:labelManage, }, ], }, "标准规范管理":{ path:'', redirect:'/standardFileManage', component:layout, children:[ { path:'standardFileManage', name:'标准规范管理', component:standardFileManage }, ], }, "数据元管理":{ path:'', redirect:'/metadataManage', component:layout, children:[ { path:'metadataManage', name:'数据元管理', component:metadataManage }, ], }, "限定词管理":{ path:'', redirect:'/determinerManage', component:layout, children:[ { path:'determinerManage', name:'限定词管理', component:determinerManage }, ], }, "代码项管理":{ path:'', redirect:'/codeItemManage', component:layout, children:[ { path:'codeItemManage', name:'代码项管理', component:codeItemManage }, ], }, "依标建库":{ path:'', redirect:'/buildSqlTable', component:layout, children:[ { path:'buildSqlTable', name:'依标建库', component:buildSqlTable }, ], }, "合规检测":{ path:'', redirect:'/complianceDetectionFunction', component:layout, children:[ { path:'complianceDetectionFunction', name:'合规检测', component:complianceDetectionFunction }, ], }, "用户管理":{ path:'', redirect:'/userAdmin', component:layout, children:[ { path:'userAdmin', name:'用户管理', component:userAdmin }, ], }, "权限管理":{ path:'', redirect:'/roleAdmin', component:layout, children:[ { path:'roleAdmin', name:'权限管理', component:roleAdmin }, ], }, "角色资源管理":{ path:'', redirect:'/roleMenu', component:layout, children:[ { path:'roleMenu', name:'角色资源管理', component:roleMenu } ], } } exportletmenuList=[] exportconstsetMenuTree=function(menuTree){ lettemp=newVue({router}) hanleFor(menuTree) temp.$router.addRoutes(menuList) temp.$router.addRoutes([{path:'*',redirect:'/'+menuList[0].redirect}]) } consthanleFor=function(list){ for(vari=0;iindex.js
importVuefrom'vue' importiViewfrom'iview' importlodashfrom'lodash' importVueLodashfrom'vue-lodash' importRouterfrom'vue-router' import{routers,menuList,setMenuTree}from'./routers'; import'iview/dist/styles/iview.css' Vue.use(Router); Vue.use(iView); Vue.use(VueLodash,lodash); exportconstrouter=newRouter({ routes:routers.router }) exportletgetMenuFuc=function(list){ setMenuTree(list) } if(sessionStorage.getItem("role")){ getMenuFuc(JSON.parse(sessionStorage.getItem("menuTree"))) } router.beforeEach((to,from,next)=>{ if(!sessionStorage.getItem("role")&&to.name!=='login'){ next('/login') }else{ next() } })login.vue
江苏消防数据资源管理服务平台