vue后端返回路由表來進行權限管理，加載指定路由結構，不包含則不加載

　　創建vue項目，配置環境變量，后續需要用到。這里只配置生產環境和開發環境。

　　項目根目錄創建　　.env.production　　文件

NODE_ENV=production
VUE_APP_URL=http://456.com

　　項目根目錄創建　　.env.development　　文件

NODE_ENV=development
VUE_APP_URL=http://123.com

　　src目錄下創建router文件夾，index文件中的內容為

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
var constantRouterMap=[]



export default new Router({
  routes: constantRouterMap,
  mode:'history'
})

　　在main.js中引入

　　在router文件夾下創建_import_development.js

module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

　　在router文件夾下創建_import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

　　這是針對不同環境下對對應文件的加載方法

　　在src文件夾下創建perssion.js，請求數據，按需加載組件

　　

import router from './router'
import {
  Message
} from 'element-ui'
import axios from 'axios'
const _import = require('./router/_import_' + process.env.NODE_ENV) //獲取組件的方法
import Layout from '@/views/layout' //Layout 是架構組件，不在后台返回，在文件里單獨引入


var getRouter //用來獲取后台拿到的路由




let IsFirst = true;//是否首次進入頁面，避免默認進入地址無權限直接報錯

router.beforeEach((to, from, next) => {
  if (!getRouter) { //不加這個判斷，路由會陷入死循環
    if (!getObjArr('router')) {
      axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {
        getRouter = res.data; //后台拿到路由
        saveObjArr('router', getRouter) //存儲路由到localStorage
        router.push(getRouter[0].path);
        routerGo(to, next) //執行路由跳轉方法
      })
    } else { //從localStorage拿到了路由
      getRouter = getObjArr('router') //拿到路由
      routerGo(to, next)

    }
  } else {
    if (to.path == '/404') {//未加載頁面默認會跳轉至404頁面
      if (IsFirst) {
        IsFirst = false;
        return;
      }
      Message.error('您沒有權限進入此頁面哦，快去聯系管理員開通吧!');
      return;
    } else {
      next()
    }
  }

})


function routerGo(to, next) {
  getRouter = filterAsyncRouter(getRouter) //過濾路由
  router.addRoutes(getRouter) //動態添加路由
  global.antRouter = getRouter //將路由數據傳遞給全局變量，做側邊欄菜單渲染工作
  next({
    ...to,
    replace: true
  })
}

function saveObjArr(name, data) { //localStorage 存儲數組對象的方法
  localStorage.setItem(name, JSON.stringify(data))
}

function getObjArr(name) { //localStorage 獲取數組對象的方法
  return JSON.parse(window.localStorage.getItem(name));

}

function filterAsyncRouter(asyncRouterMap) { //遍歷后台傳來的路由字符串，轉換為組件對象
  const accessedRouters = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') {//Layout組件特殊處理
        route.component = Layout
      } else {
      route.component = _import(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })

  return accessedRouters
}

　　在main.js引入permission.js文件

　　路由表結構

[{
    path: '/hdedit',
    name: 'hdEdit',
    component: 'znfsgl/hdEdit/index',
  },
  {
    path: '/wxtsjl',
    name: 'wxtsjl',
    component: 'znfsgl/wxtsjl/index',
  },
  {
    path: '/wxsc',
    name: 'wxsc',
    component: 'znfsgl/wxsc/index',
  }]

　　

---

返回目錄