import Vue from 'vue'
import Router from 'vue-router'
import { getUserData } from '@/script/localUserData'

const MyAddress = r => require.ensure([], () => r(require('@/views/MyAddress/MyAddress')), 'MyAddress')

Vue.use(Router)

const routes = [
 {
  path: '/profile/address',
  name: 'MyAddress',
  component: MyAddress,
  meta: {
   title: '我的地址',
   requireAuth: true
  }
 },
 // 更多...
]

const router = new Router({
 mode: 'history',
 routes
})

let indexScrollTop = 0
router.beforeEach((to, from, next) => {
 // 路由進(jìn)入下一個(gè)路由對(duì)象前，判斷是否需要登陸
 // 在路由meta對(duì)象中由個(gè)requireAuth字段，只要此字段為true，必須做鑒權(quán)處理
 if (to.matched.some(res => res.meta.requireAuth)) {
  // userData為存儲(chǔ)在本地的一些用戶信息
  let userData = getUserData()
  // 未登錄和已經(jīng)登錄的處理
  // getUserData方法處理后如果userData.token沒(méi)有值就是undefined，下面直接判斷
  if (userData.token === undefined) {
   // 執(zhí)行到此處說(shuō)明沒(méi)有登錄，君可按需處理之后再執(zhí)行如下方法去登錄頁(yè)面
   // 我這里沒(méi)有其他處理，直接去了登錄頁(yè)面
   next({
    path: '/login',
    query: {
     redirect: to.path
    }
   })
  } else {
   // 執(zhí)行到說(shuō)明本地存儲(chǔ)有用戶信息
   // 但是用戶信息是否過(guò)期還是需要驗(yàn)證一下滴
   let overdueTime = userData.overdueTime
   let nowTime = +new Date
   // 登陸過(guò)期和未過(guò)期
   if (nowTime > overdueTime) {
    // 登錄過(guò)期的處理，君可按需處理之后再執(zhí)行如下方法去登錄頁(yè)面
    // 我這里沒(méi)有其他處理，直接去了登錄頁(yè)面
    next({
     path: '/login',
     query: {
      redirect: to.path
     }
    })
   } else {
    next()
   }
  }
 } else {
  next()
 }
 if (to.path !== '/') {
  indexScrollTop = document.body.scrollTop
 }
 document.title = to.meta.title || document.title
})

router.afterEach(route => {
 if (route.path !== '/') {
  document.body.scrollTop = 0
 } else {
  Vue.nextTick(() => {
   document.body.scrollTop = indexScrollTop
  })
 }
})
export default router

```

import qs from 'qs'

import { getUserData } from '@/script/localUserData '

import router from '@/router '

import axios from 'axios'

import { AJAX_URL } from '@/config/index '

axios.defaults.baseURL = AJAX_URL

> axios請(qǐng)求攔截器代碼

 ```
/**
 * 請(qǐng)求攔截器，請(qǐng)求發(fā)送之前做些事情
 */
axios.interceptors.request.use(
 config => {
  // POST || PUT || DELETE請(qǐng)求時(shí)先格式化data數(shù)據(jù)
  // 這里需要引入第三方模塊qs
  if (
   config.method.toLocaleUpperCase() === 'POST' ||
   config.method.toLocaleUpperCase() === 'PUT' ||
   config.method.toLocaleUpperCase() === 'DELETE'
  ) {
   config.data = qs.stringify(config.data)
  }
  // 配置Authorization參數(shù)攜帶用戶token
  let userData = getUserData()
  if (userData.token) {
   config.headers.Authorization = userData.token
  }
  return config
 },
 error => {
  // 此處應(yīng)為彈窗顯示具體錯(cuò)誤信息，因?yàn)槭蔷毷猪?xiàng)目，劣者省略此處
  // 君可自行寫 || 引入第三方UI框架
  console.error(error)
  return Promise.reject(error)
 }
)

/**
 * 響應(yīng)攔截器，請(qǐng)求返回異常統(tǒng)一處理
 */
axios.interceptors.response.use(
 response => {
  // 這段代碼很多場(chǎng)景下沒(méi)用
  if (response.data && response.data.success === false) {
   // 根據(jù)實(shí)際情況的一些處理邏輯...
   return Promise.reject(response)
  }
  return response
 },
 error => {
  // 此處報(bào)錯(cuò)可能因素比較多
  // 1.需要授權(quán)處用戶還未登錄，因?yàn)槁酚啥斡序?yàn)證是否登陸，此處理論上不會(huì)出現(xiàn)
  // 2.需要授權(quán)處用戶登登錄過(guò)期
  // 3.請(qǐng)求錯(cuò)誤 4xx
  // 5.服務(wù)器錯(cuò)誤 5xx
  // 關(guān)于鑒權(quán)失敗，與后端約定狀態(tài)碼為500
  switch (error.response.status) {
   case 403:
    // 一些處理...
    break
   case 404:
    // 一些處理...
    break
   case 500:
    let userData = getUserData()
    if (userData.token === undefined) {
     // 此處為未登錄處理
     // 一些處理之后...再去登錄頁(yè)面...
     // router.push({
     //  path: '/login'
     // })
    } else {
     let overdueTime = userData.overdueTime
     let nowTime = +new Date
     if (overdueTime && nowTime > overdueTime) {
      // 此處登錄過(guò)期的處理
      // 一些處理之后...再去登錄頁(yè)面...
      // router.push({
      //  path: '/login'
      // })
     } else {
      // 極端情況，登錄未過(guò)期，但是不知道哪兒錯(cuò)了
      // 按需處理吧...我暴力回到了首頁(yè)
      router.push({
       path: '/'
      })
     }
    }
    break
   case 501:
    // 一些處理...
    break
   default:
    // 狀態(tài)碼辣么多，按需配置...
    break
  }
  return Promise.reject(error)
 }
)