vue2-client 0.1.0 → 1.1.0

package/src/utils/request.js

@@ -0,0 +1,197 @@
+import axios from 'axios'
+import Cookie from 'js-cookie'
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import notification from 'ant-design-vue/es/notification'
+
+// 跨域认证信息 header 名
+const xsrfHeaderName = 'Authorization'
+
+axios.defaults.timeout = 5000
+axios.defaults.withCredentials = true
+axios.defaults.xsrfHeaderName = xsrfHeaderName
+axios.defaults.xsrfCookieName = xsrfHeaderName
+
+// 认证类型
+const AUTH_TYPE = {
+  BEARER: 'Bearer',
+  BASIC: 'basic',
+  AUTH1: 'auth1',
+  AUTH2: 'auth2'
+}
+
+// http method
+const METHOD = {
+  GET: 'get',
+  POST: 'post'
+}
+
+/**
+ * axios请求
+ * @param url 请求地址
+ * @param method {METHOD} http method
+ * @param params 请求参数
+ * @returns {Promise<AxiosResponse<T>>}
+ */
+async function request (url, method, params, config) {
+  switch (method) {
+    case METHOD.GET:
+      return axios.get(url, { params, ...config })
+    case METHOD.POST:
+      return axios.post(url, params, config)
+    default:
+      return axios.get(url, { params, ...config })
+  }
+}
+
+/**
+ * 设置认证信息
+ * @param auth {Object}
+ * @param authType {AUTH_TYPE} 认证类型，默认：{AUTH_TYPE.BEARER}
+ */
+function setAuthorization (auth, authType = AUTH_TYPE.BEARER) {
+  switch (authType) {
+    case AUTH_TYPE.BEARER:
+      Cookie.set(xsrfHeaderName, 'Bearer ' + auth.token, { expires: auth.expireAt })
+      break
+    case AUTH_TYPE.BASIC:
+    case AUTH_TYPE.AUTH1:
+    case AUTH_TYPE.AUTH2:
+    default:
+      break
+  }
+}
+
+/**
+ * 移出认证信息
+ * @param authType {AUTH_TYPE} 认证类型
+ */
+function removeAuthorization (authType = AUTH_TYPE.BEARER) {
+  switch (authType) {
+    case AUTH_TYPE.BEARER:
+      Cookie.remove(xsrfHeaderName)
+      break
+    case AUTH_TYPE.BASIC:
+    case AUTH_TYPE.AUTH1:
+    case AUTH_TYPE.AUTH2:
+    default:
+      break
+  }
+}
+
+/**
+ * 检查认证信息
+ * @param authType
+ * @returns {boolean}
+ */
+function checkAuthorization (authType = AUTH_TYPE.BEARER) {
+  switch (authType) {
+    case AUTH_TYPE.BEARER:
+      if (Cookie.get(xsrfHeaderName)) {
+        return true
+      }
+      break
+    case AUTH_TYPE.BASIC:
+    case AUTH_TYPE.AUTH1:
+    case AUTH_TYPE.AUTH2:
+    default:
+      break
+  }
+  return false
+}
+
+/**
+ * 加载 axios 拦截器
+ * @param interceptors
+ * @param options
+ */
+function loadInterceptors () {
+  // 加载请求拦截器
+  axios.interceptors.request.use(config => {
+    const token = localStorage.getItem(ACCESS_TOKEN)
+    // 如果 token 存在
+    // 让每个请求携带自定义 token 请根据实际情况自行修改
+    if (token) {
+      config.headers['Access-Token'] = token
+    }
+    if (!config.headers['Content-Type']) {
+      config.headers['Content-Type'] = 'application/json;charset=UTF-8'
+    }
+    return config
+  }, errorHandler)
+  // 加载响应拦截器
+  axios.interceptors.response.use((response) => {
+    return response.data
+  }, errorHandler)
+}
+
+// 异常拦截处理器
+const errorHandler = (error) => {
+  if (error.response) {
+    const data = error.response.data
+    // 从 localstorage 获取 token
+    const token = localStorage.getItem(ACCESS_TOKEN)
+    if (error.response.status === 403) {
+      notification.error({
+        message: '禁止访问',
+        description: data
+      })
+    } else if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
+      notification.error({
+        message: '鉴权失败',
+        description: data
+      })
+      if (token) {
+        Vue.$store.dispatch('Logout').then(() => {
+          setTimeout(() => {
+            window.location.reload()
+          }, 1500)
+        })
+      }
+    } else if (error.response.status === 500) {
+      notification.error({
+        message: '系统异常',
+        description: data
+      })
+    } else {
+      notification.error({
+        message: '数据异常',
+        description: data
+      })
+    }
+  }
+  return Promise.reject(error)
+}
+
+/**
+ * 解析 url 中的参数
+ * @param url
+ * @returns {Object}
+ */
+function parseUrlParams (url) {
+  const params = {}
+  if (!url || url === '' || typeof url !== 'string') {
+    return params
+  }
+  const paramsStr = url.split('?')[1]
+  if (!paramsStr) {
+    return params
+  }
+  const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
+  for (let i = 0; i < paramsArr.length / 2; i++) {
+    const value = paramsArr[i * 2 + 1]
+    params[paramsArr[i * 2]] = value === 'true' ? true : (value === 'false' ? false : value)
+  }
+  return params
+}
+
+export {
+  METHOD,
+  AUTH_TYPE,
+  request,
+  setAuthorization,
+  removeAuthorization,
+  checkAuthorization,
+  loadInterceptors,
+  parseUrlParams
+}

package/src/utils/routerUtil.js

@@ -0,0 +1,353 @@
+import routerMap from '@/router/async/router.map'
+import { mergeI18nFromRoutes } from '@/utils/i18n'
+import Router from 'vue-router'
+import deepMerge from 'deepmerge'
+import basicOptions from '@/router/async/config.async'
+
+// 应用配置
+const appOptions = {
+  router: undefined,
+  i18n: undefined,
+  store: undefined
+}
+
+/**
+ * 设置应用配置
+ * @param options
+ */
+function setAppOptions (options) {
+  const { router, store, i18n } = options
+  appOptions.router = router
+  appOptions.store = store
+  appOptions.i18n = i18n
+}
+
+/**
+ * 根据 路由配置 和 路由组件注册 解析路由
+ * @param routesConfig 路由配置
+ * @param routerMap 本地路由组件注册配置
+ */
+function parseRoutes (routesConfig, routerMap) {
+  const routes = []
+  routesConfig.forEach(item => {
+    // 获取注册在 routerMap 中的 router，初始化 routeCfg
+    let router; let routeCfg = {}
+    if (typeof item === 'string') {
+      router = routerMap[item]
+      routeCfg = { path: (router && router.path) || item, router: item }
+    } else if (typeof item === 'object') {
+      // 当没有设置路由对象名或者设置的是blank路由对象时, 给空界面, path为名称
+      if (!item.router || item.router == 'blank') {
+        router = routerMap['blank']
+        item.path = item.name
+      } else {
+        router = routerMap[item.router]
+      }
+      // 查看是否是单页面
+      if (item.meta && item.meta.singlePage) {
+        router = routerMap['singlePage']
+        item.path = item.name
+      }
+      // 当没在动态路由对象中找到时, 给404页面
+      if (!router) {
+        router = routerMap['exp404']
+        item.path = item.name
+      }
+      routeCfg = item
+    }
+    if (!router) {
+      console.warn(`can't find register for router ${routeCfg.router}, please register it in advance.`)
+      router = typeof item === 'string' ? { path: item, name: item } : item
+    }
+    // 从 router 和 routeCfg 解析路由
+    const meta = {
+      authority: router.authority,
+      icon: router.icon,
+      page: router.page,
+      link: router.link,
+      params: router.params,
+      query: router.query,
+      ...router.meta
+    }
+    const cfgMeta = {
+      authority: routeCfg.authority,
+      icon: routeCfg.icon,
+      page: routeCfg.page,
+      link: routeCfg.link,
+      params: routeCfg.params,
+      query: routeCfg.query,
+      ...routeCfg.meta
+    }
+    Object.keys(cfgMeta).forEach(key => {
+      if (cfgMeta[key] === undefined || cfgMeta[key] === null || cfgMeta[key] === '') {
+        delete cfgMeta[key]
+      }
+    })
+    Object.assign(meta, cfgMeta)
+    const route = {
+      path: routeCfg.path || router.path || routeCfg.router,
+      name: routeCfg.name || router.name,
+      component: router.component || router,
+      redirect: routeCfg.redirect || router.redirect,
+      meta: { ...meta, authority: meta.authority || '*' }
+    }
+    if (routeCfg.invisible || router.invisible) {
+      route.meta.invisible = true
+    }
+    if (routeCfg.children && routeCfg.children.length > 0) {
+      route.children = parseRoutes(routeCfg.children, routerMap)
+    }
+    routes.push(route)
+  })
+  return routes
+}
+
+/**
+ * 加载路由
+ * @param routesConfig {[{router: string, children: [{router: string, children: string[]}, {router: string, children: string[]}, {router: string, authority: string, name: string, icon: string}, {path: string, router: string, name: string, icon: string, link: string}, {path: string, router: string, name: string, icon: string, link: string}]}]} 路由配置
+ */
+function loadRoutes (routesConfig) {
+  // 兼容 0.6.1 以下版本
+  /** ************* 兼容 version < v0.6.1 *****************/
+  if (arguments.length > 0) {
+    const arg0 = arguments[0]
+    if (arg0.router || arg0.i18n || arg0.store) {
+      routesConfig = arguments[1]
+      console.error('the usage of signature loadRoutes({router, store, i18n}, routesConfig) is out of date, please use the new signature: loadRoutes(routesConfig).')
+      console.error('方法签名 loadRoutes({router, store, i18n}, routesConfig) 的用法已过时, 请使用新的方法签名 loadRoutes(routesConfig)。')
+    }
+  }
+  /** ************* 兼容 version < v0.6.1 *****************/
+
+  // 应用配置
+  const { router, store, i18n } = appOptions
+
+  // 如果 routesConfig 有值，则更新到本地，否则从本地获取
+  if (routesConfig) {
+    store.commit('account/setRoutesConfig', routesConfig)
+  } else {
+    routesConfig = store.getters['account/routesConfig']
+  }
+  // 如果开启了异步路由，则加载异步路由配置
+  const asyncRoutes = store.state.setting.asyncRoutes
+  if (asyncRoutes) {
+    if (routesConfig && routesConfig.length > 0) {
+      const routes = parseRoutes(routesConfig, routerMap)
+      const finalRoutes = mergeRoutes(basicOptions.routes, routes)
+      formatRoutes(finalRoutes)
+      router.options = { ...router.options, routes: finalRoutes }
+      router.matcher = new Router({ ...router.options, routes: [] }).matcher
+      router.addRoutes(finalRoutes)
+    }
+  }
+  // 提取路由国际化数据
+  mergeI18nFromRoutes(i18n, router.options.routes)
+  // 初始化Admin后台菜单数据
+  const rootRoute = router.options.routes.find(item => item.path === '/')
+  const menuRoutes = rootRoute && rootRoute.children
+  if (menuRoutes) {
+    store.commit('setting/setMenuData', menuRoutes)
+  }
+}
+
+/**
+ * 合并路由
+ * @param target {Route[]}
+ * @param source {Route[]}
+ * @returns {Route[]}
+ */
+function mergeRoutes (target, source) {
+  const routesMap = {}
+  // eslint-disable-next-line no-return-assign
+  target.forEach(item => routesMap[item.path] = item)
+  // eslint-disable-next-line no-return-assign
+  source.forEach(item => routesMap[item.path] = item)
+  return Object.values(routesMap)
+}
+
+/**
+ * 深度合并路由
+ * @param target {Route[]}
+ * @param source {Route[]}
+ * @returns {Route[]}
+ */
+function deepMergeRoutes (target, source) {
+  // 映射路由数组
+  const mapRoutes = routes => {
+    const routesMap = {}
+    routes.forEach(item => {
+      routesMap[item.path] = {
+        ...item,
+        children: item.children ? mapRoutes(item.children) : undefined
+      }
+    })
+    return routesMap
+  }
+  const tarMap = mapRoutes(target)
+  const srcMap = mapRoutes(source)
+
+  // 合并路由
+  const merge = deepMerge(tarMap, srcMap)
+
+  // 转换为 routes 数组
+  const parseRoutesMap = routesMap => {
+    return Object.values(routesMap).map(item => {
+      if (item.children) {
+        item.children = parseRoutesMap(item.children)
+      } else {
+        delete item.children
+      }
+      return item
+    })
+  }
+  return parseRoutesMap(merge)
+}
+
+/**
+ * 格式化路由
+ * @param routes 路由配置
+ */
+function formatRoutes (routes) {
+  routes.forEach(route => {
+    const { path } = route
+    if (!path.startsWith('/') && path !== '*') {
+      route.path = '/' + path
+    }
+  })
+  formatAuthority(routes)
+}
+
+/**
+ * 格式化路由的权限配置
+ * @param routes 路由
+ * @param pAuthorities 父级路由权限配置集合
+ */
+function formatAuthority (routes, pAuthorities = []) {
+  routes.forEach(route => {
+    const meta = route.meta
+    const defaultAuthority = pAuthorities[pAuthorities.length - 1] || { permission: '*' }
+    if (meta) {
+      let authority = {}
+      if (!meta.authority) {
+        authority = defaultAuthority
+      } else if (typeof meta.authority === 'string') {
+        authority.permission = meta.authority
+      } else if (typeof meta.authority === 'object') {
+        authority = meta.authority
+        const { role } = authority
+        if (typeof role === 'string') {
+          authority.role = [role]
+        }
+        if (!authority.permission && !authority.role) {
+          authority = defaultAuthority
+        }
+      }
+      meta.authority = authority
+    } else {
+      const authority = defaultAuthority
+      route.meta = { authority }
+    }
+    route.meta.pAuthorities = pAuthorities
+    if (route.children) {
+      formatAuthority(route.children, [...pAuthorities, route.meta.authority])
+    }
+  })
+}
+
+/**
+ * 从路由 path 解析 i18n key
+ * @param path
+ * @returns {*}
+ */
+function getI18nKey (path) {
+  const keys = path.split('/').filter(item => !item.startsWith(':') && item != '')
+  keys.push('name')
+  return keys.join('.')
+}
+
+/**
+ * 加载导航守卫
+ * @param guards
+ * @param options
+ */
+function loadGuards (guards, options) {
+  const { beforeEach, afterEach } = guards
+  const { router } = options
+  beforeEach.forEach(guard => {
+    if (guard && typeof guard === 'function') {
+      router.beforeEach((to, from, next) => guard(to, from, next, options))
+    }
+  })
+  afterEach.forEach(guard => {
+    if (guard && typeof guard === 'function') {
+      router.afterEach((to, from) => guard(to, from, options))
+    }
+  })
+}
+
+/**
+ * 资源服务路由转新路由
+ * @param func
+ */
+function funcToRouter (func) {
+  const router = [{
+    router: 'root',
+    children: positionRouter(parsefunc(func))
+  }]
+  // 任何情况首位加入资源管理
+  const resourceManageMain = {
+    router: 'resourceManageMain',
+    position: 0,
+    icon: 'api',
+    name: '资源管理'
+  }
+  router[0].children.unshift(resourceManageMain)
+  return router
+}
+
+function parsefunc (func) {
+  const router = []
+  for (const row of func) {
+    const route = {
+      router: row.link,
+      meta: {
+        singlePage: row.navigate
+      },
+      position: row.position - 1,
+      icon: row.icon,
+      name: row.name
+    }
+    if (row.children && row.children.length > 0) {
+      route.children = parsefunc(row.children)
+    }
+    router.push(route)
+  }
+  return router
+}
+
+/**
+ * 资源服务路由排序
+ */
+function positionRouter (r) {
+  let router = []
+  for (const row of r) {
+    router[row.position] = row
+  }
+  router = arrRemoveEmpty(router)
+  return router
+}
+
+/**
+ * 数组去空值
+ */
+function arrRemoveEmpty (arr) {
+  for (var i = 0; i < arr.length; i++) {
+    if (arr[i] == '' || typeof (arr[i]) == 'undefined') {
+      arr.splice(i, 1)
+      i--
+    }
+  }
+  return arr
+}
+
+export { parseRoutes, loadRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions, funcToRouter }

package/src/utils/theme-color-replacer-extend.js

@@ -0,0 +1,92 @@
+const { cssResolve } = require('../config/replacer')
+// 修正 webpack-theme-color-replacer 插件提取的 css 结果
+function resolveCss (output, srcArr) {
+  const regExps = []
+  // 提取 resolve 配置中所有的正则配置
+  Object.keys(cssResolve).forEach(key => {
+    let isRegExp = false
+    let reg = {}
+    try {
+      reg = eval(key)
+      isRegExp = reg instanceof RegExp
+    } catch (e) {
+      isRegExp = false
+    }
+    if (isRegExp) {
+      regExps.push([reg, cssResolve[key]])
+    }
+  })
+
+  // 去重
+  srcArr = dropDuplicate(srcArr)
+
+  // 处理 css
+  const outArr = []
+  srcArr.forEach(text => {
+    // 转换为 css 对象
+    const cssObj = parseCssObj(text)
+    // 根据selector匹配配置，匹配成功，则按配置处理 css
+    if (cssResolve[cssObj.selector] != undefined) {
+      const cfg = cssResolve[cssObj.selector]
+      if (cfg) {
+        outArr.push(cfg.resolve(text, cssObj))
+      }
+    } else {
+      let cssText = ''
+      // 匹配不成功，则测试是否有匹配的正则配置，有则按正则对应的配置处理
+      for (const regExp of regExps) {
+        if (regExp[0].test(cssObj.selector)) {
+          const cssCfg = regExp[1]
+          cssText = cssCfg ? cssCfg.resolve(text, cssObj) : ''
+          break
+        }
+        // 未匹配到正则，则设置 cssText 为默认的 css（即不处理）
+        cssText = text
+      }
+      if (cssText != '') {
+        outArr.push(cssText)
+      }
+    }
+  })
+  output = outArr.join('\n')
+  return output
+}
+
+// 数组去重
+function dropDuplicate (arr) {
+  const map = {}
+  const r = []
+  for (const s of arr) {
+    if (!map[s]) {
+      r.push(s)
+      map[s] = 1
+    }
+  }
+  return r
+}
+
+/**
+ * 从字符串解析 css 对象
+ * @param cssText
+ * @returns {{
+ *   name: String,
+ *   rules: Array[String],
+ *   toText: function
+ * }}
+ */
+function parseCssObj (cssText) {
+  const css = {}
+  const ruleIndex = cssText.indexOf('{')
+  css.selector = cssText.substring(0, ruleIndex)
+  const ruleBody = cssText.substring(ruleIndex + 1, cssText.length - 1)
+  const rules = ruleBody.split(';')
+  css.rules = rules
+  css.toText = function () {
+    let body = ''
+    this.rules.forEach(item => { body += item + ';' })
+    return `${this.selector}{${body}}`
+  }
+  return css
+}
+
+module.exports = { resolveCss }