vue权限控制路由（vue-router 动态添加路由）

用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。

    思路如下：

    一、定义初始化默认路由。

二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。

三、通过匹配，把匹配好的路由数据addRoutes到路由中。

四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次加载动态路由。

具体代码如下：

router.js

import Vue from 'vue'
import {router} from './index'
import login from '@/views/login/login'
import layout from '@/views/layout/layout'
import home from '@/views/home/home.vue'
import depDsStorageList from '@/views/home/homePage1/depDsStorageList.vue'
 
 
// 数据管理
import dataSourceAdmin from '@/views/dataManage/dataSourceAdmin/dataSourceAdmin'
 
//初始化默认路由
export let initMenu = [
  {path: '', redirect: '/login'},
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/haveNoAuthority',
    name: 'haveNoAuthority',
    component: haveNoAuthority
  },
]
 
//动态配置路由
export let menu = {
  "首页": {
    path: '',
    redirect: '/home',
    component: layout,
    children: [
      {
        path: 'home',
        name: '首页',
        component: home,
      }
    ],
  },
  "角色资源管理": {
    path: '',
    redirect: '/roleMenu',
    component: layout,
    children: [
      {
        path: 'roleMenu',
        name: '角色资源管理',
        component: roleMenu
      }
    ],
  }
}
 
export let menuList = []
export const setMenuTree = function (menuTree) {
  let temp = new Vue({router})
  hanleFor(menuTree)
  temp.$router.addRoutes(menuList)
  temp.$router.addRoutes([{path: '*', redirect: '/' + menuList[0].redirect}])
}
 
const hanleFor = function (list){
  for (var i=0; i<list.length; i++) {
    if (list[i].children) {
      hanleFor(list[i].children)
    }else{
      menuList.push(menu[list[i].name])
    }
  }
}
export const routers = {
  router: initMenu
}
 

 
 
index.js

import Vue from 'vue'
import iView from 'iview'
import lodash  from 'lodash'
import VueLodash  from 'vue-lodash'
import Router from 'vue-router'
 
import { routers, menuList, setMenuTree } from './routers';
import 'iview/dist/styles/iview.css'
 
Vue.use(Router);
 
Vue.use(iView);
 
Vue.use(VueLodash, lodash);
 
export const router =  new Router({
  routes: routers.router
})
 
export let getMenuFuc = 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

<template>
  <div class="jq22-container loginBody" style="padding-top:100px; width: 100%; height: 100%;">
  </div>
</template>
<style>
  @import "./login.css";
</style>
<script src="./loginJs.js"></script>

loginJs.js

import {getMenuFuc} from '../../router/index'
export default {
  methods: {
    handleSubmit () {
      let _this = this
      _this.$refs.loginForm.validate((valid) => {
          _this.$ajax.post(_this.cfg.api.login, _this.form).then(function(res){
            if(res.data.result){
              sessionStorage.setItem("role",roleString)
              let menuTree = res.data.data.menuTree
              sessionStorage.setItem("menuTree",JSON.stringify(menuTree))//用于layout页面加载菜单
 
              let buttonList = res.data.data.buttonList  //存储按钮的权限控制
              sessionStorage.setItem("buttonList",JSON.stringify(buttonList))
              getMenuFuc(menuTree)
              _this.$router.push('home');
          }).catch((error)=>{ _this.spinShow = false});
        }
      });
    },
  }
};