// 引入 vue 和 axios 模塊
import Vue from 'vue'
import axios from 'axios'
// 環(huán)境變量中的請(qǐng)求地址
const baseURL = process.env.VUE_APP_API_BASE_URL

// axios 的配置變量
const config = {
  baseURL: baseURL,
  timeout: 1000 * 60 * 3 // Timeout
}

// 創(chuàng)建 axios 實(shí)例
const _axios = axios.create(config)

// axios 的請(qǐng)求攔擊器
_axios.interceptors.request.use(
  function (config) {
    // 每發(fā)起一次請(qǐng)求時(shí)，將本地存儲(chǔ)的 token 值添加到請(qǐng)求頭中。
    const token = Vue.ls.get(ACCESS_TOKEN)
    config.headers['token'] = token
    // 返回新的配置項(xiàng)
    return config
  },
  // 失敗 則返回失敗信息
  function (error) {
    return Promise.reject(error)
  }
)

// axios 的響應(yīng)攔擊器
_axios.interceptors.response.use(
  function (response) {
    // 解構(gòu)出響應(yīng)對(duì)象中的 code 和 msg
    const { code, msg } = response.data
    // 響應(yīng)頭中的 content-type 類型
    const _content_type = response.headers['content-type']
    // 是否為導(dǎo)出
    if (_content_type === _export) {
      return Promise.resolve(response)
    }
    // 匹配 code 值，和后端約定。
    // 0：響應(yīng)成功-返回響應(yīng)體；20000：用戶token為空 20001：用戶信息為空。20002：登錄失效，請(qǐng)重新登錄。
    switch (code) {
      case 0:
        return Promise.resolve(response)
      case 20000:
      case 20001:
      case 20002:
        router.replace({ path: '/login' })
        return Promise.reject(msg)
      default:
        return msg && Promise.reject(msg)
    }
  },
  // 失敗 則返回失敗信息
  function (error) {
    return Promise.reject(error.message)
  }
)

import notification from 'ant-design-vue/es/notification'
/**
 * GET 方法
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 * @returns Promise
 */
export function httpGet (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        console.warn(err, 'WARN')
        reject(err)
      })
  })
}

/**
 *
 * POST 方法
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 * @returns Promise
 */
export function httpPost (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        if (err === undefined || err.__CANCEL__) {
          return false
        }
        notification.error({
          title: '錯(cuò)誤',
          message: err
        })
        reject(err)
      })
  })
}

// mian.js
import bootstrap from './core/bootstrap'

// ./core/bootstrap.js
import Vue from 'vue'
import store from '@/store/'

export default function Initializer () {
  store.commit('SET_TOKEN', Vue.ls.get('ACCESS_TOKEN'))
  store.commit('SET_MENUS', Vue.ls.get('MENU_LIST'))
  store.commit('SET_USER_BTN', Vue.ls.get('USER_BTN'))
}

import router from '@/router'

import NProgress from 'nprogress' // 進(jìn)度條
import 'nprogress/nprogress.css' // 進(jìn)度條樣式

// 全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
    // 進(jìn)度條開(kāi)始
  NProgress.start()
  // 判讀本地存儲(chǔ)中是否由 Token
  if (Vue.ls.get(ACCESS_TOKEN)) {
    if (to.path === '/login') { // 跳轉(zhuǎn)到 login 放行，然后結(jié)束進(jìn)度條。
      next()
      NProgress.done()
    } else { // 跳轉(zhuǎn)其他
      // 動(dòng)態(tài)路由的掛載，見(jiàn) 3.2 動(dòng)態(tài)路由的掛載
      ...
    }
  } else {
    if (whiteList.includes(to.name)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 全局后置鉤子
router.afterEach(() => {
  NProgress.done()
})

if (Vue.ls.get(ACCESS_TOKEN)) {
  if (to.path === '/login') {
    next()
    NProgress.done()
  } else { // 跳轉(zhuǎn)其他
    // 判讀 vuex store 中 has 的變量標(biāo)識(shí)
    const has = store.getters.has
    // 沒(méi)有 has 變量，動(dòng)態(tài)的添加路由
    if (!has) {
      // 獲取本地存儲(chǔ)中的后端路由數(shù)據(jù)
      const menus = Vue.ls.get(MENU_LIST)
      // 調(diào)用 Vuex 中的 GenerateRoutes 異步方法將路由數(shù)據(jù)進(jìn)行追加處理
      store
        .dispatch('GenerateRoutes', menus)
        .then(res => {
          // 追加掛載處理
          router.addRoutes(store.getters.addRouters)
          // decodeURIComponent 將已編碼 URI 中所有能識(shí)別的轉(zhuǎn)義序列轉(zhuǎn)換成原字符。
          const redirect = decodeURIComponent(to.path)
          if (to.path === redirect) {
            // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
            next({ ...to, replace: true })
          } else {
            // 跳轉(zhuǎn)到目的路由
            next({ path: redirect })
          }
        })
        .catch(() => {
          // 錯(cuò)誤處理
          notification.error({
            message: '錯(cuò)誤',
            description: '請(qǐng)求用戶信息失敗，請(qǐng)重新登錄'
          })
          next('/login')
        })
    } else { // 有 has 變量，放行，跳轉(zhuǎn)。
      next()
    }
  }
}

// package.json
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "test217": "vue-cli-service build --mode test217",
},

// .env
NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'
VUE_APP_API_BASE_URL='https://xx.ss.com/api'

// .env.development
NODE_ENV = 'development'
VUE_APP_FLAG = 'dev'
VUE_APP_API_BASE_URL='http://127.0.0.1:80/api'

// .env.test217
NODE_ENV = 'production'
VUE_APP_FLAG = 'dev'
VUE_APP_API_BASE_URL='http://127.0.0.1:8087/api'

const baseURL = process.env.VUE_APP_API_BASE_URL

// main.js 
import './directives/action'

// 引入 Vue 和 store
import Vue from 'vue'
import store from '@/store'

/*
* 定義一個(gè)函數(shù)表達(dá)式
* action - 指令名稱
* inserted - 被綁定的元素插入父節(jié)點(diǎn)的時(shí)候調(diào)用(父節(jié)點(diǎn)存在即可調(diào)用，不必存在document中)
*/ 
const action = Vue.directive('action', {
  inserted: function (el, binding, vnode) {
    const actionName = binding.arg
    // Vuex Store 中的 userBtn 數(shù)據(jù)
    const userBtn = store.getters.userBtn
    // 當(dāng)前路由中的 menuId
    const menuId = vnode.context.$route.meta.menuId
    // 過(guò)濾出按鈕的 list
    const btnList = userBtn.filter(item => item.pId === menuId && item.mType === 2)
    // 判讀值是否在 btnList 中，在返回 false，否則返回 true。
    function _has (value) {
      let isExist = true
      for (let i = 0; i < btnList.length; i++) {
        if (btnList[i].identifier && btnList[i].identifier === value) {
          isExist = false
        }
      }
      return isExist
    }
    // 判斷按鈕是否在btnList中，不在就刪除或移除改按鈕 DOM。
    if (_has(actionName)) {
      el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
    }
  }
})

// 導(dǎo)出默認(rèn)這個(gè)函數(shù)表達(dá)式
export default action