Browse Source

配置axios 全局loading
Signed-off-by: caner <5658514@qq.com>

caner 3 years ago
parent
commit
b9e7ef11b6
4 changed files with 61 additions and 35 deletions
  1. 0 30
      src/utils/axios.js
  2. 49 0
      src/utils/axios.ts
  3. 10 5
      src/utils/userdata.ts
  4. 2 0
      src/vite-env.d.ts

+ 0 - 30
src/utils/axios.js

@@ -1,30 +0,0 @@
-import axios from 'axios'
-import userData from '@/utils/userdata'
-const userinfo = userData.getUserData() || ''
-
-// http request 拦截
-axios.interceptors.request.use(
-  (config) => {
-    config.baseURL = process.env.SERVERURL
-    config.headers['Authorization'] = 'Bearer ' + userinfo.token
-    return config
-  },
-  (err) => { throw err }
-)
-
-// http response 拦截
-axios.interceptors.response.use(
-  (response) => {
-    const data = response.data
-    if (data.code !== 200) {
-      if (data.code === 2002) {
-        // token 错误
-        userData.clear()
-        window.location.href = '/login.html'
-      }
-    }
-    return data
-  },
-  (error) => { throw error }
-)
-export default axios

+ 49 - 0
src/utils/axios.ts

@@ -0,0 +1,49 @@
+import axios from 'axios'
+import { getActivePinia } from "pinia";
+import userData from '@/utils/userdata'
+const userinfo = userData.getUserData() || ''
+
+// 全局loading
+const resetLoaing = (type: boolean) => {
+  const store = getActivePinia()
+  if (!store) return
+  const obj = store.state.value
+  for (const key in obj) {
+    const el = obj[key]
+    if ('loading' in el) {
+      el.loading = type
+    }
+  }
+
+}
+
+// http request 拦截=>增加是否显示loading
+axios.interceptors.request.use(
+  (config: any) => {
+    config.baseURL = import.meta.env.VITE_SERVER_URL
+    const headers = config.headers || {}
+    headers['Authorization'] = 'Bearer ' + userinfo.token
+    const showLoading = config.showLoading || false
+    if (showLoading) resetLoaing(true)
+    return config
+  },
+  (err) => { throw err }
+)
+
+// http response 拦截
+axios.interceptors.response.use(
+  (response) => {
+    const data = response.data
+    if (data.code !== 200) {
+      if (data.code === 2002) {
+        // token 错误
+        userData.clear()
+        window.location.href = '/login.html'
+      }
+    }
+    resetLoaing(false)
+    return data
+  },
+  (error) => { throw error }
+)
+export default axios

+ 10 - 5
src/utils/userdata.js → src/utils/userdata.ts

@@ -1,4 +1,10 @@
 import MD5 from 'js-md5'
 import MD5 from 'js-md5'
+interface userDATA {
+  lastLogin: number,
+  loginInfo: {
+    token: string
+  },
+}
 /**
 /**
  * 用户加密操作
  * 用户加密操作
  */
  */
@@ -8,15 +14,15 @@ class Userservice {
    * 加密
    * 加密
    * @param {string} txt 密码
    * @param {string} txt 密码
    */
    */
-  encryPassword(txt) {
+  encryPassword(txt: string) {
     const password = MD5(txt)
     const password = MD5(txt)
     return password
     return password
   }
   }
   /**
   /**
    * 存储
    * 存储
-   * @param {object} params 参数
+   * @param {userDATA} params 参数
    */
    */
-  saveUserData(params) {
+  saveUserData(params: userDATA) {
     const lastLogin = Date.now()
     const lastLogin = Date.now()
     const uses = {
     const uses = {
       ...params,
       ...params,
@@ -31,8 +37,7 @@ class Userservice {
    * 获取
    * 获取
    */
    */
   getUserData() {
   getUserData() {
-    const uses = JSON.parse(localStorage.getItem('userDATA')) || null
-    return uses
+    return JSON.parse(localStorage.getItem('userDATA') as string)
   }
   }
   /**
   /**
    * 时间限制24小时
    * 时间限制24小时

+ 2 - 0
src/vite-env.d.ts

@@ -5,3 +5,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   const component: DefineComponent<{}, {}, any>
   export default component
   export default component
 }
 }
+declare module 'js-md5'
+declare module '@/utils/*'