Chore: release 1.2.12

Author: Maorey

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 更新日志
 
+## v 1.2.12
+
+- WebSocket简单包装类
+- 完善utils
+
 ## v 1.2.10
 
 - banner插件

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tpl",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "private": false,
   "description": "vue + vuex + vue router + TypeScript(支持 JavaScript) 模板",
   "author": "毛瑞 <Maorey@Foxmail.com>",
@@ -15,15 +15,15 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "crypto-js": "3.3.0",
-    "d3": "^5.15.1",
+    "d3": "^5.16.0",
     "echarts": "^4.7.0",
     "element-ui": "^2.13.1",
     "jsencrypt": "^3.0.0-rc.1",
     "luma.gl": "^7.3.2",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "pixi.js": "^5.2.1",
-    "pixi.js-legacy": "^5.2.1",
+    "pixi.js": "^5.2.2",
+    "pixi.js-legacy": "^5.2.2",
     "register-service-worker": "^1.7.1",
     "three": "^0.115.0",
     "vue": "^2.6.11",
@@ -46,8 +46,8 @@
     "@types/d3": "^5.7.2",
     "@types/echarts": "^4.4.6",
     "@types/jest": "^25.2.1",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
+    "@typescript-eslint/eslint-plugin": "^2.29.0",
+    "@typescript-eslint/parser": "^2.29.0",
     "@vue/cli-plugin-babel": "~4.3.1",
     "@vue/cli-plugin-e2e-cypress": "~4.3.1",
     "@vue/cli-plugin-eslint": "~4.3.1",
@@ -70,14 +70,14 @@
     "eslint-plugin-vue": "^6.2.2",
     "fibers": "^4.0.2",
     "hard-source-webpack-plugin": "^0.13.1",
-    "lint-staged": "^10.1.6",
+    "lint-staged": "^10.1.7",
     "postcss-preset-env": "^6.7.0",
     "regenerate": "^1.4.0",
     "regjsgen": "^0.5.1",
     "regjsparser": "^0.6.4",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
-    "stylelint": "^13.3.2",
+    "stylelint": "^13.3.3",
     "stylelint-config-scss-maorey": "^1.1.1",
     "stylelint-webpack-plugin": "^1.2.3",
     "typescript": "~3.8.3",

src/api/user.ts

@@ -3,7 +3,7 @@
  * @Author: 毛瑞
  * @LastEditTime: 2019-07-24 11:01:36
  */
-import { HEAD, get, post } from '@/utils/ajax'
+import { setHEAD, get, post } from '@/utils/ajax'
 import { local } from '@/utils/storage'
 import CONFIG from '@/config'
 import API from '@/config/api/user'
@@ -53,7 +53,8 @@ function login(formData: ILogin) {
     account,
     password,
   }).then(res => {
-    HEAD[CONFIG.token] = res.data.token
+    setHEAD(CONFIG.token, res.data.token, true)
+    // 加密存token + 进入页面最先检查/设置token
     local.set(CONFIG.token, res.data, CONFIG.tokenAlive)
     return res
   })
@@ -65,7 +66,7 @@ function login(formData: ILogin) {
  */
 function logout() {
   return get(API.logout).then(res => {
-    delete HEAD[CONFIG.token]
+    setHEAD(CONFIG.token, '', true)
     local.remove(CONFIG.token)
     return res
   })

src/components/RouterViewTransparent.ts

@@ -34,7 +34,7 @@ export default {
     this.d = 0
   },
   beforeRouteLeave(this: any, to, from, next) {
-    this.d = to.matched.length // for 刷新
+    this.d = to.matched.length && 1 // for 刷新
     setTimeout(next)
   },
   deactivated(this: any) {

src/utils/ajax.ts renamed to src/utils/ajax/index.ts

@@ -11,8 +11,9 @@ import sort from '@/utils/sort'
 import clone from '@/utils/clone'
 import { Memory } from '@/utils/storage'
 
-// import { success, failed } from './interceptor' // [请求拦截]
-// import { emit } from '../eventBus' // 通知取消请求 以便自定义取消策略使用
+import { success, failed } from './interceptor'
+import WS from './websocket'
+// import { emit } from '@/utils/eventBus' // 通知取消请求 以便自定义取消策略使用
 
 // 默认请求配置 https://github.com/axios/axios#config-defaults
 clone(AXIOS.defaults, {
@@ -54,6 +55,30 @@ const CancelToken = AXIOS.CancelToken
 /** 是否被取消 */
 const isCancel = AXIOS.isCancel
 
+/** 全局请求头配置【只用于携带token等】 */
+let HEAD = AXIOS.defaults.headers || (AXIOS.defaults.headers = {})
+HEAD = HEAD.common || (HEAD.common = {})
+
+/** 设置【全局】请求头
+ * @param headOrKey
+ * @param value
+ * @param isToken
+ */
+function setHEAD(head: IObject): void
+function setHEAD(name: string, value: string, isToken?: boolean): void
+function setHEAD(
+  headOrKey: IObject | string,
+  value?: string,
+  isToken?: boolean
+) {
+  if (value) {
+    HEAD[headOrKey as string] = value
+    isToken && (WS.defaults.protocols = [value]) // websocket 授权
+  } else {
+    Object.assign(HEAD, headOrKey as IObject)
+  }
+}
+
 /** 【debug】带上特定查询字段 */
 let SEARCH: IObject | undefined
 location.search
@@ -66,10 +91,6 @@ location.search
     }
   )
 
-/** 全局请求头配置【只用于携带token等】 */
-let HEAD = AXIOS.defaults.headers || (AXIOS.defaults.headers = {})
-HEAD = HEAD.common || (HEAD.common = {})
-
 /** 获取url (直接使用url的情况, 比如验证码、下载、上传等, 添加BaseUrl、调试参数等)
  * @param {string} url
  * @param {IObject} params 查询参数
@@ -102,6 +123,7 @@ function searchToObj(search: string) {
   }
   return Obj
 }
+
 /** 获取请求标识
  * @param url 请求地址
  * @param params 查询参数
@@ -184,25 +206,20 @@ function request(
       requestQueue.remove(config.key) // 移除请求队列
       shouldCache && dataStore.set(config.key, res, config.alive) // 设置缓存
 
-      return res // success(res) // [请求拦截]
+      return success(res)
     })
     .catch((res: any) => {
       res.meta = config // 请求配置加到元数据
       requestQueue.remove(config.key) // 移除请求队列
-      // if (isCancel(res)) {
-      //   throw res
-      // } else if (config.$_) {
-      //   res = config.$_ // 自定义取消标记
-      //   config.$_ = 0 // 只取消一次
-      //   throw res
-      // } else {
-      //   failed(res) // [请求拦截]
-      // }
-      if (config.$_) {
+      if (isCancel(res)) {
+        throw res
+      } else if (config.$_) {
         res = config.$_ // 自定义取消标记
         config.$_ = 0 // 只取消一次
+        throw res
+      } else {
+        failed(res)
       }
-      throw res
     })
 
   // data && (cache.cancel = data) // [不划算]
@@ -309,6 +326,7 @@ export {
   CancelToken,
   isCancel,
   HEAD,
+  setHEAD,
   getUri,
   getKey,
   get,
@@ -317,4 +335,5 @@ export {
   post,
   patch,
   cancel,
+  WS,
 }

src/utils/ajax/interceptor.ts

@@ -0,0 +1,14 @@
+/** 响应拦截器 */
+// import Message from 'element-ui/lib/message'
+// import MessageBox from 'element-ui/lib/message-box'
+// ↑因scss注入问题，应在合适的地方引入组件对应的scss，比如页面入口
+
+function success(res: any) {
+  return res
+}
+
+function failed(res: any) {
+  throw res
+}
+
+export { success, failed }