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});         }       });     },   } };