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: '<App/>'
  })
}

//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 }

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容