根据权限动态添加路由

文章目录

whx-admin-system

**1.简单的写几个页面
*mian.vue是后台入口
在这里插入图片描述
*router.js
在这里插入图片描述
*登陆页面

  • 这里用的fastmock创建的一个模拟接口,假装我传了账号密码,获取到数据,

在这里插入图片描述
*这里是关于vuex的相关操作,tab.js是从index分离出来的

  • 先在vuex里定义一个数组,用来接收从后台动态获取的路由数组
    menu: [],
  • 定义一个方法addRouter,目的是讲获取到的路由数组赋值给你在vuex定义好的数组里,并且保存到sessiongStorage中
    addRouter(state, val) {
    state.menu = val
    sessionStorage.setItem(‘menu’, JSON.stringify(val))
    console.log(state.menu)
    },
  • 此时就已经拿到了路由列表,为了防止刷新vuex里面的数据会丢失,所以开始可以在session里获取到列表
  • 定义一个变量作为后台的入口,因为获取到的路由数据是有二级菜单的,所以先将拿到的数据循环判断是否有子路由,紧接着讲路径拼接好
  • 最后一步就是将过滤好的数据使用router.addRoutes()动态生成完整的路由表
  • setRouter(state, router) {
    let menu = JSON.parse(sessionStorage.getItem(‘menu’))
    if (!menu) {
    return
    }
    state.menu = menu
    let currenMenu = [
    {
    path: ‘/’,
    component: () => import(’@/views/Main.vue’),
    children: []
    }
    ]
    menu.forEach(item => {
    if (item.children) {
    item.children.forEach(chilItem => {
    chilItem.component = () => import(@/views/${chilItem.url})
    currenMenu[0].children.push(chilItem)
    })
    } else {
    item.component = () => import(@/views/${item.url}) //字符串拼接
    currenMenu[0].children.push(item)
    }
    })
    console.log(menu)
    router.addRoutes(currenMenu)
    // console.log(router)
    }
  • 然后就是在登录的时候调用vuex的这两个方法,讲从后台获取到的数据传到vuex里面,这里为了防止用户二次登录,先清除vuex和session里面的数据,登录成功跳转到后台

在这里插入图片描述
在这里插入图片描述

*模拟数据如下
在这里插入图片描述
*侧边栏
在这里插入图片描述
*mian.js
在这里插入图片描述

  • 这里做了一个简单的路由守卫,因为在登录的时候储存了一个token,判断有无token,如果没有就回到login页面
  • 因为页面一刷新vuex的数据也会重新刷新,所以在生命周期created调用一次setRouter
    store.commit(‘setRouter’, router)

*真实的数据会根据你账号的不同生成不同的路由列表,这样就从前端防止用户越级访问页面
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值