vue使用动态路由实现路由权限控制(不同角色显示不同路由)

1.在登陆成功之后，获取用户信息以及对应的用户权限

2.获取全部需要根据权限判断的路由列表（这里是模拟后台返回的路由数据，注意格式和路由级别，不然后面会出错，在路由配置文件里面添加静态路由，404页面不需要添加到静态路由里面，不然会报错）

{
    path:'/',
    name:'home',
    component:()=>import('@/views/home/home.vue'),
    redirect:'/home',
    children:[
        {
            name: 'index',
            path: '/home',
            component:()=> import('@/views/home/index/index.vue'),
            meta: { isshow: true, title: '首页', icon: 'Setting' }
        }
    ]
},
//可视化模块
{
    name: 'ksh',
    path: '/keshi',
    component:()=> import('@/views/home/index/keshi.vue'),//引入新的一个路由会重新出现一个新的页面
    meta: { isshow: true, title: '可视化', icon: 'Setting' }
},
//用户管理模块
{
    name: 'user',
    path: '/user',
    component:()=> import('@/views/home/home.vue'),
    meta: { isshow: true, title: '用户管理', icon: 'Setting' },
    redirect:'/user/list',
    children: [
        {
            name: 'userlist',
            path: '/user/list',
            component:()=> import('@/views/home/user/userlist.vue'),
            meta: { isshow: true, title: '角色管理', icon: 'Setting' },
        },
        {
            name: 'caidang',
            path: '/user/caidang',
            component:()=> import('@/views/home/user/caidan.vue'),
            meta: { isshow: true, title: '菜单管理', icon: 'Setting' },
        }
    ]
},
{
        name: 'zhifu',
        path: '/zhifu',
        component:()=> import('@/views/home/home.vue'),//这里一级目录引入必须是和其他一级目录引入的路由一样
        meta: { isshow: true, title: '订单管理', icon: 'Setting' },
        redirect:'/zhifu/dingdan',
        children: [
            {
                name: 'dingdan',
                path: '/zhifu/dingdan',
                component:()=> import('@/views/home/zhifu/dingdan.vue'),
                meta: { isshow: true, title: '支付订单', icon: 'Setting' },
            },
            {
                name: 'tuikuang',
                path: '/zhifu/tuikuang',
                component:()=> import('@/views/home/zhifu/tuikuang.vue'),
                meta: { isshow: true, title: '退款订单', icon: 'Setting' },
            }
        ]
    },

3.获取用户对应权限的路由，使用递归方法通过过滤数组可以得到

setrouterlist() {
            let user = getuserinfo()//获取用户权限，是一个数组
function digui(list:any,arrlist:any):any {//第一个参数是获取全部的静态路由数组，第二个参数是用户权限的数组
   return list.filter((ite:any):any=>{
    if(!arrlist.includes(ite.name)){
 if(ite.children&&ite.children.length>0){
            ite.children=digui(ite.children,luyuolist)
        }
        return true
    }
    })
}
let list=digui(routers,luyuolist)//通过调用函数返回符合条件的路由数组
list.map(ite=>{
router.addRoute(ite)//使用循环动态添加路由
})

    }

4.验证路由是否添加成功

console.log(router.getRoutes());

 最后：这样做会出现问题，就是点击浏览器刷新按钮的时候会出现空白，但是看控制台已经将路由添加进去了，就是没有页面出现，差了资料大多数是在路由拦截里面使用 next({...to})  ，

但是我使用之后出现控制台一直打印数据，页面卡死的情况，有没有大佬可以解决这个问题，欢迎留言