qiaobi/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Store from '../store'
import Cookies from 'js-cookie'

import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式

import permissions from '@/utils/permissions'

import {stringifyQuery,parseQuery} from '@/utils/query'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
const routes = [
  {
    path: "/",
    component: () => import('@/views/index'),
  },

  {
    path: '/register',
    name: 'Register',
    meta: {
      title: '注册'
    },
    component: () => import("@/views/register/index.vue")
  },
  {
    path: "",
    component: () => import('@/views/layout/index.vue'),
    children: [
      {
        path: '/home',
        name: 'Home',
        meta: {
          // title: '首页',
          sign: 'home',
          belong: 'home'
        },
        component: () => import('@/views/home/index.vue'),
      },
      {
        path: '/introduction',
        name: 'Introduction',
        meta: {
          // title: '首页',
          sign: 'introduction',
          belong: 'introduction'
        },
        component: () => import('@/views/home/components/downLoad/introduction/index.vue'),
      },
      {
        path: '/moreMessage',
        name: 'moreMessage',
        meta: {
          // title: '首页',
          sign: 'moreMessage',
          belong: 'moreMessage'
        },
        component: () => import('@/views/moreMessage/index.vue'),
      },
    ]
  }

]
/* 后台管理系统Layout */
import administrator_layout from '@/views/backStageManage/layout/Layout.vue'
export let backStageManageRouterItem = [
  {
    path: '/administrator',
    component: administrator_layout,
    redirect: '/administrator/home',
    meta: { title: '首页', icon: 'home' },
    children: [
      {
        path: 'home',
        name: 'Administrator_home',
        component: () => import('@/views/backStageManage/home/index.vue'),
        meta: { title: '首页', icon: 'home' },
      },
    ],
  },
  {
    path: '/administrator',
    component: administrator_layout,
    redirect: '/administrator/personalMessage',
    meta: { title: '人员信息', icon: 'home' },
    hidden:true,
    children: [
      {
        path: 'personalMessage',
        name: 'Administrator_personalMessage',
        component: () => import('@/views/backStageManage/organization/personnel/details.vue'),
        meta: { title: '个人信息', icon: 'home' },
        hidden:true
      },
    ],
  },
  
]
export const defaultBackStageManageRouterItem = [
  {
    path: '/administrator',
    name: 'Administrator_organization',
    component: administrator_layout,
    redirect: '/administrator/personnel',
    meta: { title: '人员组织管理', icon: '人员组织' },
    children: [
      {
        path: 'tenant',
        name: 'Administrator_tenant',
        component: () => import('@/views/backStageManage/organization/tenant/index.vue'),
        meta: {title: '企业管理',icon: '企业',sign:'administrator/tenant'},
      },
      {
        path: 'personnel',
        name: 'Administrator_personnel',
        component: () => import('@/views/backStageManage/organization/personnel/index.vue'),
        meta: {title: '人员清单',icon: '人员',sign:'administrator/personnel'},
      },
      {
        path: 'department',
        name: 'Administrator_department',
        component: () => import('@/views/backStageManage/organization/department/index.vue'),
        meta: {title: '部门管理',icon: '部门',sign:'administrator/department'},
      },
      {
        path: 'position',
        name: 'Administrator_position',
        component: () => import('@/views/backStageManage/organization/position/index.vue'),
        meta: {title: '职位管理',icon: '职位',sign:'administrator/position'},
        
      },
      {
        path: 'editTenant',
        name: 'Administrator_editTenant',
        component: () => import('@/views/backStageManage/organization/tenant/editTenant.vue'),
        meta: {title: '编辑企业信息',icon: '企业',keepAlive:true},
        hidden:true
      },
      
      {
        path: 'invitationMessage',
        name: 'Administrator_invitationMessage',
        component: () => import('@/views/backStageManage/organization/personnel/components/invitationMessage/index.vue'),
        meta: {title: '邀请人员清单',icon: '人员',sign:'administrator/invitationMessage'},
        hidden:true
      },
      
      {
        path: 'addDepartment',
        name: 'Administrator_addDepartment',
        component: () => import('@/views/backStageManage/organization/department/addDepartment.vue'),
        meta: {title: '添加部门',keepAlive:true},
        hidden:true
      },
      {
        path: 'editDepartment',
        name: 'Administrator_editDepartment',
        component: () => import('@/views/backStageManage/organization/department/editDepartment.vue'),
        meta: {title: '编辑部门', keepAlive:true},
        hidden:true
      },
      
      {
        path: 'addPosition',
        name: 'Administrator_addPosition',
        component: () => import('@/views/backStageManage/organization/position/addPosition.vue'),
        meta: {title: '添加职位',keepAlive:true},
        hidden:true
      },
      {
        path: 'editPosition',
        name: 'Administrator_editPosition',
        component: () => import('@/views/backStageManage/organization/position/editPosition.vue'),
        meta: {title: '编辑职位', keepAlive:true},
        hidden:true
      },
    ]
  },

  {
    path: '/administrator',
    name: 'Administrator_application',
    component: administrator_layout,
    redirect: '/administrator/vision',
    meta: { title: '应用管理', icon: 'application' },
    children: [
      // {
      //   path: 'addApply',
      //   name: 'Administrator_addApply',
      //   component: () => import('@/views/backStageManage/application/apply/components/addApply.vue'),
      //   meta: {title: '添加应用功能', icon: 'apply', keepAlive:true},
      //   hidden:true
      // },
      // {
      //   path: 'apply',
      //   name: 'Administrator_apply',
      //   component: () => import('@/views/backStageManage/application/apply/index.vue'),
      //   meta: { title: '应用功能清单', icon: 'apply' }
      // },
      {
        path: 'function',
        name: 'Administrator_function',
        component: () => import('@/views/backStageManage/application/function/index.vue'),
        meta: { title: '应用功能清单', icon: '应用功能',sign:'administrator/function'}
      },
      {
        path: 'vision',
        name: 'Administrator_vision',
        component: () => import('@/views/backStageManage/application/vision/index.vue'),
        meta: { title: '应用版本管理', icon: '版本' ,sign:'administrator/vision'},
        
      },
      {
        path: 'vipType',
        name: 'Administrator_vipType',
        component: () => import('@/views/backStageManage/application/vipType/index.vue'),
        meta: {title: '应用会员类型', icon: '会员类型',sign:'administrator/vipType'},
        
      },
      {
        path: 'addVersion',
        name: 'Administrator_addVersion',
        component: () => import('@/views/backStageManage/application/vision/addVersion.vue'),
        meta: {title: '添加应用版本', icon: 'addVision',keepAlive:true},
        hidden:true
      },
      {
        path: 'editVersion',
        name: 'Administrator_editVersion',
        component: () => import('@/views/backStageManage/application/vision/editVersion.vue'),
        meta: {title: '编辑应用版本', icon: 'editVision',keepAlive:true},
        hidden:true,
      },
      {
        path: 'versionDetail',
        name: 'Administrator_versionDetail',
        component: () => import('@/views/backStageManage/application/vision/versionDetail.vue'),
        meta: {title: '应用版本详情', icon: 'editVision'},
        hidden:true
      },
      
      {
        path: 'addVipType',
        name: 'Administrator_addVipType',
        component: () => import('@/views/backStageManage/application/vipType/addVipType.vue'),
        meta: {title: '添加应用会员类型',keepAlive:true},
        hidden:true
      },
      {
        path: 'editVipType',
        name: 'Administrator_editVipType',
        component: () => import('@/views/backStageManage/application/vipType/editVipType.vue'),
        meta: {title: '编辑应用会员类型', keepAlive:true},
        hidden:true
      },
      {
        path: 'vipTypeDetail',
        name: 'Administrator_vipTypeDetail',
        component: () => import('@/views/backStageManage/application/vipType/vipTypeDetail.vue'),
        meta: {title: '应用会员类型详情'},
        hidden:true
      },
    ]
  },
  {
    path: '/administrator',
    name: 'Administrator_goodsManage',
    component: administrator_layout,
    redirect: '/administrator/goods',
    meta: { title: '商品管理', icon: '商品管理'},
    children: [
      {
        path: 'goods',
        name: 'Administrator_goods',
        component: () => import('@/views/backStageManage/goods/goods/index.vue'),
        meta: {title: '商品管理', icon: '商品管理',sign:'administrator/goods'},
        
      },
      {
        path: 'addGoods',
        name: 'Administrator_addGoods',
        component: () => import('@/views/backStageManage/goods/goods/addGoods.vue'),
        meta: {title: '添加商品',keepAlive:true},
        hidden:true
      },
      {
        path: 'editGoods',
        name: 'Administrator_editGoods',
        component: () => import('@/views/backStageManage/goods/goods/editGoods.vue'),
        meta: {title: '修改商品', keepAlive:true},
        hidden:true
      },
      {
        path: 'goodsDetails',
        name: 'Administrator_goodsDetails',
        component: () => import('@/views/backStageManage/goods/goods/goodsDetails.vue'),
        meta: {title: '商品详情'},
        hidden:true
      },
    ]
  },
  {
    path: '/administrator',
    name: 'Administrator_paymentAndStat',
    component: administrator_layout,
    redirect: '/administrator/paymentRecord',
    meta: { title: '支付与统计', icon: 'shouzhitongji'},
    children: [
      {
        path: 'paymentRecord',
        name: 'Administrator_paymentRecord',
        component: () => import('@/views/backStageManage/paymentAndStat/paymentRecord/index.vue'),
        meta: {title: '支付记录', icon: 'zhifujilu',sign:'administrator/payRecord'},
        
      },
      {
        path: 'statPayRecord',
        name: 'Administrator_statPayRecord',
        component: () => import('@/views/backStageManage/paymentAndStat/statPayRecord/index.vue'),
        meta: {title: '支付统计', icon: 'zijinzhifutongjibaobiao',sign:'administrator/payCount'},
      },
    ]
  },
  {
    path: '/administrator',
    name: 'Administrator_paymentCodeManage',
    component: administrator_layout,
    redirect: '/administrator/paymentCode',
    meta: { title: '付费码管理', icon: '付费'},
    children: [
      {
        path: 'paymentCode',
        name: 'Administrator_paymentCode',
        component: () => import('@/views/backStageManage/paymentCode/paymentCode/index.vue'),
        meta: {title: '付费码管理', icon: '付费',sign:'administrator/paymentCode'},
        
      },
      {
        path: 'addPaymentCode',
        name: 'Administrator_addPaymentCode',
        component: () => import('@/views/backStageManage/paymentCode/paymentCode/addPaymentCode.vue'),
        meta: {title: '添加付费码',keepAlive:true},
        hidden:true
      },
      {
        path: 'editPaymentCode',
        name: 'Administrator_editPaymentCode',
        component: () => import('@/views/backStageManage/paymentCode/paymentCode/editPaymentCode.vue'),
        meta: {title: '编辑付费码', keepAlive:true},
        hidden:true
      },
      {
        path: 'paymentCodeDetail',
        name: 'Administrator_paymentCodeDetail',
        component: () => import('@/views/backStageManage/paymentCode/paymentCode/paymentCodeDetail.vue'),
        meta: {title: '付费码详情'},
        hidden:true
      },
    ]
  },
  {
    path: '/administrator',
    name: 'Administrator_examine',
    component: administrator_layout,
    redirect: '/administrator/examine',
    meta: { title: '审核管理', icon: '审核'},
    children: [
      {
        path: 'examine',
        name: 'Administrator_examine',
        component: () => import('@/views/backStageManage/examine/examine/index.vue'),
        meta: {title: '审核任务', icon: '审核',sign:'administrator/examine'},
        
      },
    ]
  },
]
export const backStageManage = [
  {
    path: '/administrator',
    name: 'Administrator',
    component: { render(c) { return c('router-view') } },
    redirect: '/administrator',
    children: [
      {
        path: '/',
        name: 'Administrator_Index',
        meta: {
          title: '后台管理',
          notLogin:true
        },
        component: () => import('@/views/backStageManage/index/index.vue'),
      },
      {
        path: 'login',
        name: 'Administrator_login',
        meta: {
          title: '后台管理-登录',
          notLogin:true
        },
        component: () => import('@/views/backStageManage/login/index.vue'),
      },
      {
        path: 'register',
        name: 'Administrator_register',
        meta: {
          title: '后台管理-企业注册',
          notLogin:true
        },
        component: () => import('@/views/backStageManage/login/component/register.vue'),
      },
      {
        path: '/administrator',
        component: administrator_layout,
        redirect: '/administrator/403',
        meta: { title: '错误访问' },
        children: [
          {
            path: '403',
            name:'Administrator_403',
            meta: {
              title: '无权限',
            },
            hidden:true,
            component: () => import('@/views/errorPage/403.vue'),
          },
        ],
      },
      ...backStageManageRouterItem
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: '/',
  stringifyQuery: stringifyQuery, // 序列化query参数
  parseQuery: parseQuery, // 反序列化query参数
  routes: [...routes, ...backStageManage]
})

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  if (to.path == '/administrator/login'|| routeExists(routes,to.path) || to.meta.notLogin) {
    if(to.path == '/administrator/login'){
      Cookies.remove("token")
      Store.commit('SET_PERMISSION',null)
      localStorage.removeItem('vuex')
      sessionStorage.removeItem('showMessage')
    }
    next()
  }
  else {
    const tokenStr = Cookies.get('token')
    switch (tokenStr) {
      case undefined:
        if (to.meta.title) {
          document.title = to.meta.title;
        }
        next({ name: 'Administrator_login' })
        break;
      default:
        if(Store.getters.permission === null){
          Store.dispatch('getPersonPermission').then(response=>{
            var permission = response.data
            // if(permission.length>0){}
              setRoutePermission(permission).then(() => { // 生成可访问的路由表
                backStageManageRouterItem = backStageManageRouterItem.concat(Store.state.permission.addRouters)
                router.addRoutes(Store.state.permission.addRouters); // 动态添加可访问路由表
                next({ ...to, replace: true })
              })
          }).catch(error=>{
            
            next()
          })
        }else{
          if(to.meta.sign && !permissions.FunPermissions(to.meta.sign)){
            next({ name: 'Administrator_403' })
          }else{
             next()
          }
        }
        break;

    }
  }
})


function setRoutePermission(data){
  return new Promise((resolve, reject)=>{
    if(permissions.hasPermission([1,3])){
      Store.commit('SET_ROUTERS', defaultBackStageManageRouterItem);
      resolve();
      return
    }
    var addRouters = []
    for(var i = 0;i<defaultBackStageManageRouterItem.length;i++){
      var item = defaultBackStageManageRouterItem[i]
      if(item.meta.sign){
        var index = data.indexOf(item.meta.sign)
        if(index == -1){
          continue;
        }
      }
      var childrenRouter = []
      if(item.children && item.children.length){
        childrenRouter = item.children.filter(child=>{
          return !child.meta.sign || data.indexOf(child.meta.sign) != -1
        })
      }
      item.children = childrenRouter
      if(item.children.length>0){
        var child = item.children.find(i=>{
          return !i.hidden
        })
        if(child){
          item.redirect = item.path + '/' +child.path
        }else{
          item.children = []
        }
      }
      if(item.meta.sign || item.children.length>0){
        addRouters.push(item)
      }
      
    }
    Store.commit('SET_ROUTERS', addRouters);
    resolve();
  })
  
}

function routeExists(array, path, parentPath) {
  for (var i = 0; i < array.length; i++) {
    var item = array[i]
    var nowPath = item.path
    if (item.path.indexOf('/') != 0) {
      nowPath = parentPath + '/' + nowPath
    }
    if (!item.children || item.children.length == 0) {
      if (path == nowPath) {
        return true
      }
    } else {
      var data = item.children
      var sign = routeExists(data, path, nowPath)
      if (sign) {
        return true
      }
    }
  }
  return false
}

// 在你的路由配置文件中
router.afterEach((to, from) => {
  NProgress.done()
  var sign = routeExists(backStageManageRouterItem, to.path)
  if (!sign) {
    return
  }
  var obj = {
    name: to.meta.title,
    path: to.path,
    route: {
      name: to.name,
      path: to.path,
      query: to.query,
      params: to.params
    }
  }
  Store.commit('addHistory', obj);
  Store.commit('addHistoryPath', to.path);
});

export default router