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;i
index.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
江苏消防数据资源管理服务平台