vue动态路由权限管理配置

一般用于后台管理系统,登陆成功后台返回可用路由,将router的路由进行匹配,对用户进行限制
分3个板块

1. 账号管理(account)
   给账号绑定角色(多选),一个账号可绑定多个角色
   

2. 角色管理(role)
   设定角色:例如超级管理员,普通用户,给角色配置菜单权限,将菜单列表以树状图结构返回,利用element的tree组件展示,勾选上哪个菜单就表示有权限进入这个页面
   

3. 菜单管理(menu)
   菜单列表添加你后台管理系统router配置的每个path名称,
   
   登录后根据返回的权限路由（menus）与router配置递归比较修改meta.show=true（自定义）这样就可以控制导航菜单显示,将返回的menus储存,在路由拦截调取,并判断当前要跳转的路由是否在权限内,否则不跳转并提示
   在login.vue中
   登录成功后后台返回路由信息
   

import routes from '../router/routes'
export default {
data() {
        return {
            form: {
                password: '',
                account: ''
            },
            routerArr: []
        }
    },
methods: {
        login() {
            if (this.form.account == '') {
                this.$message.error('请输入账号')
                return false
            }
            if (this.form.password == '') {
                this.$message.error('请输入密码')
                return false
            }
            this.$api.login(this.form).then((data) => {
                if (data.code == 200) {
                    let menus = data.data.menus
                    localStorage.setItem('menu', JSON.stringify(menus))
                    let arr = []
                    for (let i in menus) {
                        arr.push(menus[i].path)
                    }
                    arr = arr.join(',')
                    localStorage.setItem('menusRouter', arr)
                    localStorage.setItem('accessToken', data.data.accessToken)
                    this.mapRoot(menus, routes[1].children)
                }
            })
        },
        mapRoot(arr, routerArr) {
            for (let i in routerArr) {
                for (let j in arr) {
                    if (
                        routerArr[i].path == arr[j].path &&
                        routerArr[i].path != ''
                    ) {
                        if (routerArr[i].meta.isMenu != undefined) {
                            routerArr[i].meta.isMenu = true
                        }
                        break
                    }
                }
                if (routerArr[i].children && routerArr[i].children.length > 0) {
                    this.mapRoot(arr, routerArr[i].children)
                }
            }
            this.$router.push({ path: '/main' })
        }
    }
  }

这是我router.js配置部分代码

{
                path: 'groupQuesList',
                name: 'groupQuesList',
                component: () => import('@/views/topic/groupQuesList.vue'),
                meta: {
                    isMenu: false,//true为显示在导航，默认全是false
                    icon: 'el-icon-edit-outline',
                    title: '组试题'
                }
            },
            {
                path: 'groupBangTi',
                name: 'groupBangTi',
                component: () => import('@/views/topic/groupBangTi.vue'),
                meta: {
                    title: '组-绑定试题' //不显示在导航的页面不要设置isMenu
                }
            }

如有写的不明白的地方请在下方留言