根据权限动态添加路由

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)

*真实的数据会根据你账号的不同生成不同的路由列表，这样就从前端防止用户越级访问页面