vue项目，里面有多个角色，要求用共同的 router，header

1.可以把router 里面的 index.js 封装成公共的 ，把json文件引进来，还有store。

2.下面是判断 用户类型，进哪个json 文件

export function asyncRouterMap () {
  let RouterMap = []
  const asyncRouterMapData = []
  // eslint-disable-next-line eqeqeq
  if (store.getters.userType == '1') {
    RouterMap = adminRouteData.admin.router
  } else if (store.getters.userType === '99') {
    RouterMap = operationRouteData.operation.router
  } else if (store.getters.userType === '2') {
  // eslint-disable-next-line no-const-assign
    RouterMap = chartRouteData.chart.router
  }
  for (let i = 0; i < RouterMap.length; i++) {
    const item = {
      path: RouterMap[i].path,
      redirect: RouterMap[i].redirect,
      name: RouterMap[i].name,
      component: main,
      hidden: RouterMap[i].hidden,
      children: []
    }
    for (let j = 0; j < RouterMap[i].children.length; j++) {
      let itemChild = {
        path: '/' + RouterMap[i].children[j].path,
        name: RouterMap[i].children[j].name,
        icon: RouterMap[i].children[j].icon,
        component: _import(RouterMap[i].children[j].path)
      }
      item.children.push(itemChild)
    }
    asyncRouterMapData.push(item)
  }
  console.log(asyncRouterMapData)

  return asyncRouterMapData
}

 

3. 在containers => 下的  main.vue 

 v-show="!plat"  判断左侧边栏 和底部 是否显示

main.vue  代码如下：

<template>
  <div class="app">
    
      <AppHeader/>
       <div class="app-body">
        <Sidebar  v-show="!plat"/>
        <div class="main" ref="main" :class='[plat ? "platmap": ""]'>
          <breadcrumb  :list="list" v-show="!plat"/>
          <div class="container-fluid" :class='[plat ? "platfluid": ""]'>
            <router-view></router-view>
          </div>
        </div>
        <AppAside/>
       </div>
      <AppFooter v-show="!plat"/>
    
    
  </div>
</template>

<script>
import AppHeader from '../components/Header'
import Sidebar from '../components/Sidebar'
import AppAside from '../components/Aside'
import AppFooter from '../components/Footer'
import Breadcrumb from '../components/Breadcrumb'

export default {
  components: {
    AppHeader,
    Sidebar,
    AppAside,
    AppFooter,
    Breadcrumb
  },
  data(){
    return{
      plat: false
    }
  },
  computed: {
    name () {
      return this.$route.name
    },
    list () {
      return this.$route.matched
    }
  },
  created(){
    if(this.$store.state.user.userType == "2"){
      this.plat = true
    }
  }
}
</script>
<style scoped>
  .platmap{
    margin-left: 0 !important
  }
  .platfluid{
    padding: 0
  }
</style>

4. 在components => header.vue  

没修改前的：

可以把这块封装一下，用数组遍历；

 

 5. navheader  判断条件：

6. header.vue 代码：

<template>
  <navbar>
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
    <a class="navbar-brand">
      <img src="/static/img/MainMenu_logo.png">
      <span class="workName">{{networkName}}</span>
    </a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item">
        <a class="nav-link navbar-toggler sidebar-toggler"  @click="sidebarMinimize">&#9776;</a>
      </li>
     
    </ul>

    <ul class="nav navbar-nav d-md-down-none">
      <li v-for="item in navData" class="nav-item header-item" :key="item.index">
        <router-link tag="div" :to='item.path'  style="height:55px;" class="nav-link">
            <span><Icon :type="item.icon" size='30' color="#2d8cf0"></Icon></span>
            <span  style="color:white"> {{item.name}} </span>
        </router-link> 
      </li>
    </ul>

    <ul class="nav navbar-nav ml-auto">

      <Dropdown class="nav-item">
        <a href="javascript:void(0)">
           <span slot="button">
          <img src="/static/img/avatars/6.png"  alt="o" style="width:50px;height:50px;">
          <span class="d-md-down-none">{{this.$store.state.user.name}}</span>
          </span>
        </a>
        <Dropdown-menu slot="list">
            <Dropdown-item > <a href="" @click="Logout"  ><p  class="dropdown-itemp"><Icon type="power"></Icon>登出</p></a></Dropdown-item>
        </Dropdown-menu>
    </Dropdown>

 
      <li class="nav-item d-md-down-none">
        <a class="nav-link navbar-toggler aside-menu-toggler"  @click="asideToggle">&#9776;</a>
      </li>
    </ul>
  </navbar>
</template>
<script>

import navbar from './Navbar'

export default {
  components: {
    navbar, 
  },
  data(){
    return{
     logo: "",
     networkName: '',
     navData: []
    }
  },
  methods: {
    Logout(e){
         e.preventDefault();
         this.$store.dispatch('LogOut').then(() => {
                this.$router.push({ path: '/login' });
                
                console.log(this)
              }).catch(err => {
                this.$message.error(err);
              });
    },
    click () {
      // do nothing
    },
    sidebarToggle (e) {
      e.preventDefault()
      document.body.classList.toggle('sidebar-hidden')
    },
    sidebarMinimize (e) {
      e.preventDefault()

      document.body.classList.toggle('sidebar-minimized')
    },
    mobileSidebarToggle (e) {
      e.preventDefault()

      document.body.classList.toggle('sidebar-mobile-show') 
    },
    asideToggle (e) {
      e.preventDefault()
      document.body.classList.toggle('aside-menu-hidden')
    },
    URL_LOGO(){ 
      this.networkName = this.$store.getters.serverNodeName
      let manage = this.$store.state.parameter.deserve.M406
      // for(let i=0; i<manage.length; i++){
      //   if(manage[i].itemValue == this.$store.getters.manageType){
      //     this.logo = "/static/img/"+ manage[i].itemName +"-logo.png"
      //   }
      // }
    },
    navHeader(){
      
      if(this.$store.state.user.userType == "1"){
        this.$axios({ 
            method: 'GET',
            url: '/static/json/admin.json',
        }).then((res)=> {
            this.navData = res.data.admin.header
        }).catch((error) =>{})
      }else if(this.$store.state.user.userType == "99"){
        this.$axios({ 
            method: 'GET',
            url: '/static/json/operation.json',
        }).then((res)=> {
            this.navData = res.data.operation.header
        }).catch((error) =>{})
      }else if(this.$store.state.user.userType == "2"){
        this.$axios({ 
            method: 'GET',
            url: '/static/json/chart.json',
        }).then((res)=> {
            this.navData = res.data.chart.header
        }).catch((error) =>{})
      }
    }
  },
  created(){
    this.URL_LOGO()
    this.navHeader()
  }
}
</script>

<style type="text/css" scoped>
  .dropdown-itemp{
    text-align: left;
    font-size: 15px;
    padding: 10px;
  }
 .header-item .ivu-dropdown-item{
  padding: 15px;
}
  .header-item{
    width: 120px;
    height: 55px;
    line-height: 55px;
  }
  .header-item span:first-child{height:55px;width:30px;float:left;margin-left:12px;}
  .header-item span:last-child{height:55px;width:70px;float:left;}
  .header-item:hover{
    background-color:#20a8d8
  }
  .header-item a{
        color:white !important;
  }
.navbar-brand img{width:40px;height:40px;display: inline-block;margin:3px;}
.workName{color: #ffffff}
</style>

 

 

7.然后在本地文件static 里面建一个json 文件， 每个对应的角色，建立一个json文件。用时调用就可以。

admin.json 代码如下：

{
    "admin": {
        "header": [
            {
                "path": "/liveEdit",
                "name": "广播直播",
                "icon": "logo-vimeo"
            },
            {
                "path": "/addTemplet",
                "name": "广播编播",
                "icon": "logo-youtube"
            },
            {
                "path": "/train",
                "name": "列车广播",
                "icon": "md-videocam"
            },
            {
                "path": "/",
                "name": "广播素材",
                "icon": "md-trophy"
            },
            {
                "path": "/broadcastConfigure",
                "name": "广播分区",
                "icon": "md-git-network"
            },
            {
                "path": "/facility",
                "name": "广播监听",
                "icon": "md-headset"
            },
            {
                "path": "/facility",
                "name": "广播监控",
                "icon": "md-eye"
            },
            {
                "path": "/statistical",
                "name": "统计查询",
                "icon": "ios-search"
            }
        ],
        "router": [
            {
              "path": "/",
              "redirect": "/views/material/editMaterial",
              "name": "素材",
              "hidden": false,
              "children": [
                {"path": "views/material/editMaterial", "name": "素材编制", "icon": "ios-book"},
                {"path": "views/material/auditMaterial", "name": "素材审核", "icon": "md-cube"},
                {"path": "views/material/recordMaterial", "name": "素材档案", "icon": "ios-paper"},
                {"path": "views/material/issueMaterial", "name": "素材发布", "icon": "logo-codepen"}
          
              ] 
            },
            {
                "path": "/liveEdit",
                "redirect": "/views/live/liveEdit",
                "name": "直播",
                "hidden": false,
                "children": [
                  {"path": "views/live/liveEdit", "name": "直播编辑", "icon": "md-film"},
                  {"path": "views/live/test", "name": "监听", "icon": "md-film"}
                ] 
            },
            {
                "path": "/addTemplet",
                "redirect": "/views/broadcast/addTemplet/index",
                "name": "播表",
                "hidden": false,
                "children": [
                  {"path": "views/broadcast/addTemplet/index", "name": "模板编辑", "icon": "md-map"},
                  {"path": "views/broadcast/reviewTemplate/index", "name": "模板审核", "icon": "md-map"},
                  {"path": "views/broadcast/addRec/index", "name": "播表编辑", "icon": "md-map"},
                  {"path": "views/broadcast/reviewRec/index", "name": "播表审核", "icon": "md-map"},
                  {"path": "views/broadcast/inquire", "name": "播表档案", "icon": "md-map"},
                  {"path": "views/broadcast/resIssue", "name": "播表发布", "icon": "md-map"},
                  {"path": "views/broadcast/resState", "name": "播表状态", "icon": "md-map"}
                ] 
            },
            {
                "path": "/train",
                "redirect": "/views/train",
                "name": "广播",
                "hidden": false,
                "children": [
                  {"path": "views/train", "name": "列车广播", "icon": "logo-vimeo"}
                ] 
            },
            {
                "path": "/circuit",
                "redirect": "/views/database/circuit",
                "name": "线路",
                "hidden": false,
                "children": [
                    {"path": "views/database/circuit", "name": "线路数据", "icon": "md-briefcase"},
                    {"path": "views/database/station", "name": "车站数据", "icon": "md-briefcase"},
                    {"path": "views/database/zoning", "name": "分区数据", "icon": "md-briefcase"}
                  
                ] 
            },
            {
                "path": "/facility",
                "redirect": "/views/facility",
                "name": "设备",
                "hidden": false,
                "children": [
                  {"path": "views/facility", "name": "设备管理", "icon": "md-briefcase"}
                ] 
            },
            {
                "path": "/broadcastConfigure",
                "redirect": "/views/broadcastConfigure",
                "name": "广播分区",
                "hidden": false,
                "children": [
                  {"path": "views/broadcastConfigure", "name": "广播分区状态", "icon": "md-briefcase"}
                ] 
            },
            {
                "path": "/statistical",
                "redirect": "/views/record/statistical",
                "name": "统计查询",
                "hidden": false,
                "children": [
                    {"path": "views/record/statistical", "name": "录音查询", "icon": "md-mic"},
                    {"path": "views/record/report", "name": "录音上报", "icon": "md-microphone"}
                ]
              }          
          
          ]
          
    }
}

chart.json 代码如下：

{
    "chart": {
        "header": [],
        "router": [
            {
                "path": "/",
                "redirect": "/metroChart/graph/gbt",
                "name": "用户",
                "hidden": false,
                "children": [
                  {"path": "metroChart/graph/gbt", "name": "分区信息", "icon": "md-grid"}
                ] 
            }
        ] 
    }
}

operation.json 代码如下：

{
    "operation": {
        "header": [
            {
                "path": "/",
                "name": "用户管理",
                "icon": "md-person-add"
            },
            {
                "path": "/priority",
                "name": "优先级管理",
                "icon": "ios-briefcase"
            },
            {
                "path": "/subarea",
                "name": "分区管理",
                "icon": "md-trophy"
            },
            {
                "path": "/device",
                "name": "设备管理",
                "icon": "md-person-add"
            },
            {
                "path": "/baseInfo",
                "name": "基本信息管理",
                "icon": "md-calendar"
            }

        ],
        "router": [
            {
                "path": "/",
                "redirect": "/syscfg/userModule/user",
                "name": "设备",
                "hidden": false,
                "children": [
                  {"path": "syscfg/userModule/user", "name": "用户信息", "icon": "md-person"}
                ] 
            },
            {
                "path": "/priority",
                "redirect": "/syscfg/priority/priority",
                "name": "优先级",
                "hidden": false,
                "children": [
                  {"path": "syscfg/priority/priority", "name": "优先级配置信息", "icon": "ios-grid"}
                ] 
            },
            {
                "path": "/subarea",
                "redirect": "/syscfg/subareaModule/subarea",
                "name": "分区",
                "hidden": false,
                "children": [
                  {"path": "syscfg/subareaModule/subarea", "name": "分区信息", "icon": "md-grid"}
                ] 
            },
            {
                "path": "/device",
                "redirect": "/syscfg/deviceModule/device",
                "name": "设备",
                "hidden": false,
                "children": [
                  {"path": "syscfg/deviceModule/device", "name": "设备信息", "icon": "md-briefcase"},
                  {"path": "syscfg/deviceModule/devicePerformance", "name": "设备性能管理", "icon": "md-desktop"},
                  {"path": "syscfg/deviceModule/deviceConfigure", "name": "设备状态", "icon": "md-easel"},
                  {"path": "syscfg/deviceModule/broadcastConfigure", "name": "广播区状态", "icon": "md-megaphone"},
                  {"path": "syscfg/deviceModule/test", "name": "测试页面", "icon": "md-megaphone"}
                ] 
            },
            {
                "path": "/baseInfo",
                "redirect": "/syscfg/baseInfo/nodeInfo/nodeInfo",
                "name": "基本信息",
                "hidden": false,
                "children": [
                  {"path": "syscfg/baseInfo/nodeInfo/nodeInfo", "name": "服务节点信息", "icon": "ios-browsers"},
                  {"path": "syscfg/baseInfo/line/line", "name": "线路信息", "icon": "md-menu"},
                  {"path": "syscfg/baseInfo/station/station", "name": "车站信息", "icon": "ios-subway"}
                ] 
            }
        ]
    }
}

8. 修改 store 里面的 modules 下的 permission.js 

 

permission.js    代码如下：

/* eslint-disable eqeqeq */
import { asyncRouterMap, constantRouterMap } from 'src/router'
import store from 'src/store/index.js'

/**
 * 通过meta.role判断是否与当前用户权限匹配
 * @param roles
 * @param route
 */
function hasPermission (roles, route) {
  if (route.meta && route.meta.role) {
    return roles.some(role => route.meta.role.indexOf(role) >= 0)
  } else {
    return true
  }
}

/**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
 * @param asyncRouterMap
 * @param roles
 */
function filterAsyncRouter (asyncRouterMap, roles) {
  const accessedRouters = asyncRouterMap.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}

function getNowRouter (asyncRouterMap, to) {
  return asyncRouterMap.some(route => {
    if (to.path.indexOf(route.path) !== -1) {
      return true
    } else if (route.children && route.children.length) { // 如果有孩子就遍历孩子
      return getNowRouter(route.children, to)
    }
  })
}

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: [],
    siderbar_routers: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
      // state.routers.forEach(function (e) {
      //   if (e.name === '首页') {
      //     state.siderbar_routers = e
      //   }
      // })
    },
    SET_NOW_ROUTERS: (state, to) => {
      // 递归访问 accessedRouters，找到包含to 的那个路由对象，设置给siderbar_routers
      console.log(state.addRouters)
      state.addRouters.forEach(e => {
        if (e.children && e.children.length) {
          if (getNowRouter(e.children, to) === true) { state.siderbar_routers = e }
        }
      })
    }

  },
  actions: {
    GenerateRoutes ({ commit }, data) {
      return new Promise(resolve => {
        const roles = data
        let accessedRouters
        let userType = store.getters.userType
        console.log(store.getters.userType)
        accessedRouters = asyncRouterMap()
        // if (userType === '1') {
        //   accessedRouters = asyncRouterMap()
        // } else if (userType === '2') {
        //   accessedRouters = metroChartRouterMapUser
        // } else if (userType === '99') {
        //   accessedRouters = asyncRouterMapUser
        // } else {
        //   accessedRouters = filterAsyncRouter(asyncRouterMap(), roles)
        // }

        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    },

    getNowRoutes ({ commit }, data) {
      return new Promise(resolve => {
        // data => to
        commit('SET_NOW_ROUTERS', data)
        resolve()
      })
    }
  }
}

export default permission

此时npm run dev 跑起来试试

如果报错就来修改此地：

 

 

在启动  完美！