vue -- 全局配置403和404页面

//main.js
import 'babel-polyfill'
import '@/styles/index.less'
import '@/utils/rem'
import Vue from 'vue'
import App from './App'
import router from '@/router'
import store from '@/store'
import httpCode from '@/utils/httpCode'
import api from '@/api/all'
import axios from '@/utils/axios'
import vfilter from '@/utils/vfilter'
import regExp from '@/utils/regExp'
import xhfDialog from '@/components/base/xhf-dialog'
import xhfNumBox from '@/components/base/xhf-num-box'
import xhfCalendar from '@/components/base/xhf-calendar'
import schedulFlight from '@/components/base/schedul-flight'
import VueUeditorWrap from '@xuhengfeng/vue-ueditor-wrap'
import mixin from '@/utils/mixins'
import { menuList } from '@/utils/menuList'

Vue.mixin(mixin)
Vue.component('xhfDialog', xhfDialog)
Vue.component('xhfNumBox', xhfNumBox)
Vue.component('xhfCalendar', xhfCalendar)
Vue.component('schedulFlight', schedulFlight)
Vue.component('VueUeditorWrap', VueUeditorWrap)
Vue.prototype.$regExp = regExp
for (let i in vfilter) {
  Vue.filter(i, vfilter[i])
  Vue.prototype[`$${i}`] = vfilter[i]
}

Vue.use(api)
  .use(httpCode)
  .use(axios)
Vue.config.productionTip = false

Vue.directive('enterNumber', {
  inserted: function (el) {
    el.addEventListener('keypress', function (e) {
      e = e || window.event
      let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      let re = /\d/
      if (
        !re.test(String.fromCharCode(charcode)) &&
        charcode > 9 &&
        !e.ctrlKey
      ) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
          e.returnValue = false
        }
      }
    })
  }
})

// 路由白名单(已过滤掉权限路由)
const whiteList = () => {
  if (sessionStorage.menus) {
    let proMenuList = JSON.parse(sessionStorage.menus)
    return menuList.filter(el =>
      proMenuList.find(item => item.name === el.menuName)
    )
  }
}

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = '海南轮渡后台系统'
  }
  // 当前拉取到的用户信息token 或者 用户名
  let role = sessionStorage.getItem('token')
  // 如果已经登录
  if (role) {
    // 判断是否存在于白名单中
    // 判断是否匹配到了该页面 等于1即没有匹配到
    // 判断此时页面是否是Forbidden页面
    // 则调用next进入Forbidden页面
    let isHas = whiteList().findIndex(el => to.path.includes(el.menuCode))
    if (isHas === -1 && to.matched.length !== 1 && to.path !== '/Forbidden') {
      next('/Forbidden')
    } else {
      next()
    }
  } else if (to.meta.permission) {
    // 利用meta元信息再对确定要权限路由进行权限判断
    // 如果是管理员权限则可进入
    role === 'admin' ? next() : next('/Forbidden')
  } else {
    if (to.path === '/login') {
      // 如果是登录页面的话，直接next()
      next()
    } else {
      // 否则 跳转到登录页面
      next('/login')
    }
  }
})

renderApp(router)

function renderApp (router) {
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    store,
    components: {
      App
    },
    template: ''
  })
}

//router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 登录
const Login = () => import('@/components/pages/Login')

// 航班管理
const FlightManage = () => import('@/components/pages/FlightManage')
const FlightList = () =>
  import('@/components/pages/FlightManage/children/FlightList')

// 订单管理
const OrderManage = () => import('@/components/pages/OrderManage')
const OrderList = () =>
  import('@/components/pages/OrderManage/children/OrderList')
const OrderDetail = () =>
  import('@/components/pages/OrderManage/children/OrderDetail')

// 财务管理
const FinanceManage = () => import('@/components/pages/FinanceManage')
const Fin = () => import('@/components/pages/FinanceManage/children/Fin')

// 用户统计
const UserStatic = () => import('@/components/pages/UserStatic')
const DataReport = () =>
  import('@/components/pages/UserStatic/children/DataReport')
const DataChart = () =>
  import('@/components/pages/UserStatic/children/DataChart')

// 车辆统计
const StatisticsCar = () => import('@/components/pages/StatisticsCar')
const Cars = () => import('@/components/pages/StatisticsCar/children/Cars')

// 打印
const Printing = () => import('@/components/pages/Printing')
const Printin = () => import('@/components/pages/Printing/children/Printing')

// 司机承诺书打印
const Driverprinting = () => import('@/components/pages/Driverprinting')
const Driverprintin = () =>
  import('@/components/pages/Driverprinting/children/Driverprinting')

// 客服中心
const ServiceCenter = () => import('@/components/pages/ServiceCenter')
const ServiceList = () =>
  import('@/components/pages/ServiceCenter/children/ServiceList')

// 司机承诺书
const DriverCommitment = () => import('@/components/pages/DriverCommitment')
const Commitment = () =>
  import('@/components/pages/DriverCommitment/children/Commitment')

// 验票统计
const CheckTicket = () => import('@/components/pages/CheckTicket')
const CheckTicke = () =>
  import('@/components/pages/CheckTicket/children/CheckTicket')

// 轮播管理
const Carousel = () => import('@/components/pages/Carousel')
const CarouselIndex = () =>
  import('@/components/pages/Carousel/children/Carousel')

// 基础配置
const BasicConfig = () => import('@/components/pages/BasicConfig')
const BasicConfigIndex = () =>
  import('@/components/pages/BasicConfig/children/BasicConfig')
const BasicConfigsms = () =>
  import('@/components/pages/BasicConfig/children/BasicConfigsms')
const messagepush = () =>
  import('@/components/pages/BasicConfig/children/messagepush')

// 统计报表
const StatisReport = () => import('@/components/pages/StatisReport')
const TicketList = () =>
  import('@/components/pages/StatisReport/children/TicketList')
const OrderStatic = () =>
  import('@/components/pages/StatisReport/children/OrderStatic')
const CheckList = () =>
  import('@/components/pages/StatisReport/children/CheckList')
const TicketInComeList = () =>
  import('@/components/pages/StatisReport/children/TicketInComeList')
const InsuranceInComeList = () =>
  import('@/components/pages/StatisReport/children/InsuranceInComeList')

// 权限配置
const AuthorManage = () => import('@/components/pages/AuthorManage')
const AuthorList = () =>
  import('@/components/pages/AuthorManage/children/AuthorList')
const StaffList = () =>
  import('@/components/pages/AuthorManage/children/StaffList')

// 敏感词
const SensitiveWords = () => import('@/components/pages/SensitiveWords')
const SensitiveSetup = () =>
  import('@/components/pages/SensitiveWords/children/SensitiveSetup')
const SensitiveWord = () =>
  import('@/components/pages/SensitiveWords/children/SensitiveWord')

// 用户统计
const UserManage = () => import('@/components/pages/UserManage')
const UserList = () => import('@/components/pages/UserManage/children/UserList')

// 黑名单
const BlackList = () => import('@/components/pages/BlackList')
const BlackLis = () => import('@/components/pages/BlackList/children/BlackLis')

// 资讯中心
const InfomationCenter = () => import('@/components/pages/InfomationCenter')
const InfomationList = () =>
  import('@/components/pages/InfomationCenter/children/InfomationList')
const InfomationType = () =>
  import('@/components/pages/InfomationCenter/children/InfomationType')

// 页面路由
const pagesRouter = [
  // 航班管理
  {
    path: '/FlightManage',
    redirect: '/FlightManage/FlightList',
    component: FlightManage,
    children: [
      {
        path: 'FlightList',
        name: 'FlightList',
        component: FlightList,
        meta: { permission: false }
      }
    ]
  },
  // 订单管理
  {
    path: '/OrderManage',
    redirect: '/OrderManage/OrderList',
    component: OrderManage,
    children: [
      {
        path: 'OrderList',
        name: 'OrderList',
        component: OrderList
      },
      {
        path: 'OrderDetail',
        name: 'OrderDetail',
        component: OrderDetail
      }
    ]
  },
  // 司机承诺书
  {
    path: '/DriverCommitment',
    redirect: '/DriverCommitment/Commitment',
    component: DriverCommitment,
    children: [
      {
        path: 'Commitment',
        name: 'Commitment',
        component: Commitment
      }
    ]
  },
  // 司机承诺书打印
  {
    path: '/Driverprinting',
    redirect: '/Driverprinting/Driverprintin',
    component: Driverprinting,
    children: [
      {
        path: 'Driverprintin',
        name: 'Driverprintin',
        component: Driverprintin
      }
    ]
  },
  // 验票统计
  {
    path: '/CheckTicket',
    redirect: '/CheckTicket/CheckTicket',
    component: CheckTicket,
    children: [
      {
        path: 'CheckTicket',
        name: 'CheckTicket',
        component: CheckTicke
      }
    ]
  },
  // 财务管理
  {
    path: '/FinanceManage',
    redirect: '/FinanceManage/Fin',
    component: FinanceManage,
    children: [
      {
        path: 'Fin',
        name: 'Fin',
        component: Fin
      }
    ]
  },
  // 用户统计
  {
    path: '/UserStatic',
    redirect: '/UserStatic/DataReport',
    component: UserStatic,
    children: [
      {
        path: 'DataReport',
        name: 'DataReport',
        component: DataReport
      },
      {
        path: 'DataChart',
        name: 'DataChart',
        component: DataChart
      }
    ]
  },
  // 车辆统计
  {
    path: '/StatisticsCar',
    redirect: '/StatisticsCar/Cars',
    component: StatisticsCar,
    children: [
      {
        path: 'Cars',
        name: 'Cars',
        component: Cars
      }
    ]
  },
  // 车辆统计打印
  {
    path: '/Printing',
    redirect: '/Printing/Printin',
    component: Printing,
    children: [
      {
        path: 'Printin',
        name: 'Printin',
        component: Printin
      }
    ]
  },
  // 客服中心
  {
    path: '/ServiceCenter',
    redirect: '/ServiceCenter/ServiceList',
    component: ServiceCenter,
    children: [
      {
        path: 'ServiceList',
        name: 'ServiceList',
        component: ServiceList
      }
    ]
  },
  // 轮播管理
  {
    path: '/Carousel',
    redirect: '/Carousel/CarouselIndex',
    component: Carousel,
    children: [
      {
        path: 'CarouselIndex',
        name: 'CarouselIndex',
        component: CarouselIndex
      }
    ]
  },
  // 统计报表
  {
    path: '/StatisReport',
    redirect: '/StatisReport/OrderStatic',
    component: StatisReport,
    children: [
      {
        // 订单统计
        path: 'OrderStatic',
        name: 'OrderStatic',
        component: OrderStatic
      },
      {
        // 旅客 小客车 大客车 车票
        path: 'TicketList/:id',
        name: 'TicketList',
        component: TicketList
      },
      {
        // 旅客 小客车 大客车 检票
        path: 'CheckList/:id',
        name: 'CheckList',
        component: CheckList
      },
      {
        // 船票按天收入统计
        path: 'TicketInComeList',
        name: 'TicketInComeList',
        component: TicketInComeList
      },
      {
        // 保险按天收入统计
        path: 'InsuranceInComeList',
        name: 'InsuranceInComeList',
        component: InsuranceInComeList
      }
    ]
  },
  // 基础配置
  {
    path: '/BasicConfig',
    redirect: '/BasicConfig/BasicConfigIndex',
    component: BasicConfig,
    children: [
      {
        path: 'BasicConfigIndex',
        name: 'BasicConfigIndex',
        component: BasicConfigIndex
      },
      {
        // 消息管理
        path: 'BasicConfigsms',
        name: 'BasicConfigsms',
        component: BasicConfigsms
      },
      {
        // 消息推送
        path: 'messagepush',
        name: 'messagepush',
        component: messagepush
      }
    ]
  },
  // 敏感词
  {
    path: '/SensitiveWords',
    redirect: '/SensitiveWords/SensitiveSetup',
    component: SensitiveWords,
    children: [
      {
        path: 'SensitiveSetup',
        name: 'SensitiveSetup',
        component: SensitiveSetup
      },
      {
        path: 'SensitiveWord',
        name: 'SensitiveWord',
        component: SensitiveWord
      }
    ]
  },
  // 权限配置
  {
    path: '/AuthorManage',
    redirect: '/AuthorManage/AuthorList',
    component: AuthorManage,
    children: [
      {
        path: 'AuthorList',
        name: 'AuthorList',
        component: AuthorList
      },
      {
        path: 'StaffList',
        name: 'StaffList',
        component: StaffList
      }
    ]
  },
  // 用户管理
  {
    path: '/UserManage',
    redirect: '/UserManage/UserList',
    component: UserManage,
    children: [
      {
        path: 'UserList',
        name: 'UserList',
        component: UserList
      }
    ]
  },
  // 资讯中心
  {
    path: '/InfomationCenter',
    redirect: '/InfomationCenter/InfomationType',
    component: InfomationCenter,
    children: [
      {
        path: 'InfomationType',
        name: 'InfomationType',
        component: InfomationType
      },
      {
        path: 'InfomationList',
        name: 'InfomationList',
        component: InfomationList
      }
    ]
  },
  // 黑名单
  {
    path: '/BlackList',
    redirect: '/BlackList/BlackLis',
    component: BlackList,
    children: [
      {
        path: 'BlackLis',
        name: 'BlackLis',
        component: BlackLis
      }
    ]
  }
]

// 全部路由
const TotalRouter = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    redirect: '/FlightManage',
    component: () => import('@/components/pages/Home'),
    children: [...pagesRouter]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/Forbidden',
    name: 'Forbidden',
    component: () => import('@/components/pages/Forbidden'),
    meta: {
      title: 'Forbidden无权限页面'
    }
  },
  {
    path: '/Notfound',
    name: 'Notfound',
    component: () => import('@/components/base/404'),
    meta: {
      title: 'Notfound页面不存在'
    }
  },
  {
    path: '*',
    redirect: '/Notfound'
  }
]

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