yuang-framework-ui-common 1.0.14 → 1.0.15

package/lib/config/httpConfig.ts

@@ -0,0 +1,79 @@
+import axios from "axios"
+
+
+import {showErrorMessage} from '../utils/messageUtils';
+import {alertMessageBox} from '../utils/messageBoxUtils';
+
+import {getSsoLoginUrl, clearSsoAccessToken} from '../utils/ssoUtils';
+
+const messageMap = {
+    requestError: '请求异常',
+    responseSturctError: '响应结构错误',   
+}
+
+const http = axios.create({
+    baseURL: (window as any).$config?.apiBaseUrl ?? '/gateway-api',
+    timeout: 5000,
+    headers: {}
+})
+
+
+/* 请求拦截 */
+http.interceptors.request.use(config => {
+        config.headers["X-Requested-With"] = 'XMLHttpRequest';
+
+        let gatewayAccessToken = localStorage.getItem("gatewayAccessToken") ?? '';
+        let gatewayPublicKey = localStorage.getItem("gatewayPublicKey") ?? '';
+        let ssoAccessToken = localStorage.getItem("ssoAccessToken") ?? '';
+        if (gatewayAccessToken) {
+            config.headers["Gateway-Access-Token"] = gatewayAccessToken;
+        }
+        if (gatewayPublicKey) {
+            config.headers["Gateway-Public-Key"] = gatewayPublicKey;
+        }
+
+        if (ssoAccessToken) {
+            config.headers["Sso-Access-Token"] = ssoAccessToken;
+        }
+        config.headers["Request-Id"] = 'test';
+        return config;
+    }, error => {
+        showErrorMessage(error?.message || messageMap.requestError);
+        return Promise.reject(error);
+    }
+);
+
+
+/* 响应拦截器 */
+http.interceptors.response.use((res) => {
+    if(!res?.data?.statusCode){
+        showErrorMessage(messageMap.responseSturctError);
+        return Promise.reject(new Error(messageMap.responseSturctError));
+    }
+    if (res?.data?.statusCode !== 200) {
+        // 登录过期处理
+        if (res?.data?.statusCode === 401) {
+            alertMessageBox({
+                title: '系统提示',
+                message: '登录状态已过期, 请退出重新登录!',
+                confirmButtonText: '重新登录',
+                callback: (action: string) => {
+                    if (action === 'confirm') {
+                        clearSsoAccessToken();
+                        location.href = getSsoLoginUrl();
+                    }
+                }
+            });
+            return Promise.reject(new Error(res?.data?.message));
+        }
+        showErrorMessage(res?.data?.message || messageMap.requestError);
+        return Promise.reject(new Error(res?.data?.message));
+    }
+    return res;
+}, (error) => {
+    showErrorMessage(error?.message || messageMap.requestError);
+    return Promise.reject(error);
+});
+
+
+export {http}

package/lib/config/initConfig.ts

@@ -0,0 +1,28 @@
+import {isPc} from '../utils/deviceUtils';
+
+
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import {ElMessage} from 'element-plus'
+
+import vant from 'vant';
+import 'vant/lib/index.css';
+
+
+import {http} from './httpConfig';
+import moment from 'moment';
+
+const initConfig = (app) => {
+    app.config.globalProperties.$http = http;
+    app.config.globalProperties.$moment = moment;
+
+    if (isPc()) {
+        app.config.globalProperties.$message = ElMessage;
+        app.use(ElementPlus);
+    } else {
+        app.use(vant);
+    }
+
+}
+
+export {initConfig} ;

package/lib/utils/aesUtils.ts

@@ -1,7 +1,27 @@
 
 import CryptoJS from 'crypto-js'
 
-// aes加密
+/**
+ * 获取aesKey
+ * 生成16位随机码
+ * @returns {string}
+ */
+const getAesRandomKey = () => {
+    var chars = [ '0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K', 'L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f', 'g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
+    var randomKey = ''
+    // 这个地方切记要选择16位，因为美国对密钥长度有限制，选择32位的话加解密会报错，需要根据jdk版本去修改相关jar包，有点恼火，选择16位就不用处理。
+    for (var i = 0; i < 16; i++) {
+        let id = parseInt((Math.random() * 61).toString());
+        randomKey += chars[id]
+    }
+    return randomKey
+}
+
+/**
+ * aes加密
+ * @param aesKey
+ * @param originData
+ */
 const aesEncrypt = (aesKey, originData) => {
     // 设置一个默认值，如果第二个参数为空采用默认值，不为空则采用新设置的密钥
     var key = CryptoJS.enc.Utf8.parse(aesKey)
@@ -15,7 +35,11 @@ const aesEncrypt = (aesKey, originData) => {
     return encrypted.toString()
 }
 
-// aes解密
+/**
+ * aes解密
+ * @param aesKey
+ * @param originData
+ */
 const aesDecrypt = (aesKey, originData) => {
     var key = CryptoJS.enc.Utf8.parse(aesKey)
     var decrypt = CryptoJS.AES.decrypt(originData, key, {
@@ -25,24 +49,9 @@ const aesDecrypt = (aesKey, originData) => {
     })
     return CryptoJS.enc.Utf8.stringify(decrypt).toString()
 }
-/**
- * 获取aesKey
- * 生成16位随机码
- * @returns {string}
- */
-const getAesRandomKey = () => {
-    var chars = [ '0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K', 'L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f', 'g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
-    var nums = ''
-    // 这个地方切记要选择16位，因为美国对密钥长度有限制，选择32位的话加解密会报错，需要根据jdk版本去修改相关jar包，有点恼火，选择16位就不用处理。
-    for (var i = 0; i < 16; i++) {
-        let id = parseInt((Math.random() * 61).toString());
-        nums += chars[id]
-    }
-    return nums
-}
 
 export  {
+    getAesRandomKey,
     aesEncrypt,
-    aesDecrypt,
-    getAesRandomKey
+    aesDecrypt
 }

package/lib/utils/deviceUtils.ts

@@ -0,0 +1,72 @@
+/**
+ * 是否移动设备
+ */
+const isMd = () => {
+    return navigator.userAgent.match(
+        /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
+    );
+}
+/**
+ * 是否平板
+ */
+const isPad = () => {
+    var ua = window.navigator.userAgent
+    if (/ipad/i.test(ua)) {
+        return true;
+    }
+    // iPad from IOS13
+    var macApp = ua.match(/Macintosh/i) != null
+    if (!macApp) {
+        return false;
+    }
+    // need to distinguish between Macbook and iPad
+    var canvas = document.createElement('canvas')
+    if (!canvas) {
+        return false;
+    }
+    var context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
+    if (!context) {
+        return false;
+    }
+    var info = (context as any).getExtension('WEBGL_debug_renderer_info')
+    if (!info) {
+        return false;
+    }
+    var renderer = (context as any).getParameter(info.UNMASKED_RENDERER_WEBGL)
+    if (renderer.indexOf('Apple') != -1) {
+        return true;
+    }
+    return false;
+
+
+}
+/**
+ * 是否个人电脑
+ */
+const isPc = () => {
+    if (isMd() || isPad()) {
+        return false;
+    }
+    return true;
+}
+
+/**
+ * 获取设备类型
+ * @returns pc/md/unknow
+ */
+const getDeviceType = () => {
+    if(isPc()){
+        return 'pc';
+    }
+    if(isMd()){
+        return 'md';
+    }
+    return 'unknow';
+}
+
+export {
+    isMd,
+    isPad,
+    isPc,
+    getDeviceType
+}

package/lib/utils/gatewayUtils.ts

@@ -1,14 +1,11 @@
 
-import http from '../config/http';
+import {http} from '../config/httpConfig';
 
 const initGateway = () => {
     return new Promise<void>(async resolve => {
         let gatewayAccessToken = localStorage.getItem("gatewayAccessToken");
         if (!gatewayAccessToken) {
             let res = await http.get('/server/gateway/getGatewayConfig');
-            if (res.data.statusCode != 200) {
-                return console.error(res.data.message);
-            }
             localStorage.setItem("gatewayAccessToken", res.data.data.gatewayAccessToken);
             localStorage.setItem("gatewayPublicKey", res.data.data.gatewayPublicKey);
         }

package/lib/utils/messageBoxUtils.ts

@@ -0,0 +1,23 @@
+import {isPc} from './deviceUtils';
+
+import { ElMessageBox } from 'element-plus/es';
+
+
+
+const alertMessageBox = ({title, message, confirmButtonText, callback}) => {
+    if(isPc()) {
+        ElMessageBox.close();
+        ElMessageBox.alert(message, title, {
+            confirmButtonText: confirmButtonText,
+            callback: (action) => {
+                callback && callback(action);
+            },
+            type: 'warning',
+            draggable: true
+        });
+    }
+}
+
+export {
+    alertMessageBox,
+}

package/lib/utils/messageUtils.ts

@@ -0,0 +1,68 @@
+import {isPc} from './deviceUtils';
+
+import {ElMessage} from 'element-plus'
+import {showNotify} from 'vant';
+
+
+const showSuccessMessage = (message) => {
+    showMessage({
+        type: 'success',
+        message: message,
+    });
+}
+
+const showWarningMessage = (message) => {
+    showMessage({
+        type: 'warning',
+        message: message,
+    });
+}
+
+const showInfoMessage = (message) => {
+    showMessage({
+        type: 'info',
+        message: message,
+    });
+}
+
+const showErrorMessage = (message) => {
+    showMessage({
+        type: 'error',
+        message: message,
+    });
+}
+
+/**
+ * 显示消息
+ * @param type 'success' | 'warning' | 'info' | 'error'
+ * @param message
+ */
+const showMessage = ({type, message}) => {
+    if (isPc()) {
+        ElMessage({
+            type: type,
+            message: message,
+            duration: 3 * 1000
+        })
+    } else {
+        if (type == 'error') {
+            showNotify({type: 'danger', message: message});
+        } else if (type == 'info') {
+            showNotify({
+                message: message,
+                color: '#909399',
+                background: '#e9e9eb',
+            });
+        } else {
+            showNotify({type: type, message: message});
+        }
+    }
+}
+
+export {
+    showSuccessMessage,
+    showWarningMessage,
+    showInfoMessage,
+    showErrorMessage,
+    showMessage,
+}

package/lib/utils/rsaUtils.ts

@@ -1,60 +1,66 @@
-
 import JSEncrypt from 'jsencrypt'
 
-// rsa加密
-const rsaEncrypt = (Str, afterPublicKey) => {
-    const encryptor = new JSEncrypt()
-    encryptor.setPublicKey(afterPublicKey) // 设置公钥
-    return encryptor.encrypt(Str) // 对数据进行加密
-}
-
-// rsa解密
-const rsaDecrypt = (Str, frontPrivateKey) => {
-    const encryptor = new JSEncrypt()
-    encryptor.setPrivateKey(frontPrivateKey) // 设置私钥
-    return encryptor.decrypt(Str) // 对数据进行解密
-}
 
-//获取rsa密钥对
+/**
+ * 获取rsa密钥对
+ */
 const getRsaKeys = () => {
     return new Promise((resolve, reject) => {
-        window.crypto.subtle
-            .generateKey(
-                {
-                    name: 'RSA-OAEP',
-                    modulusLength: 2048, //can be 1024, 2048, or 4096
-                    publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
-                    hash: { name: 'SHA-512' } //can be "SHA-1", "SHA-256", "SHA-384", or "SHA-512"
-                },
-                true, //whether the key is extractable (i.e. can be used in exportKey)
-                ['encrypt', 'decrypt'] //must be ["encrypt", "decrypt"] or ["wrapKey", "unwrapKey"]
-            )
-            .then(function(key) {
-                window.crypto.subtle
-                    .exportKey('pkcs8', key.privateKey)
-                    .then(function(keydata1) {
-                        window.crypto.subtle
-                            .exportKey('spki', key.publicKey)
-                            .then(function(keydata2) {
-                                var privateKey = convertText(keydata1, 1)
+        window.crypto.subtle.generateKey(
+            {
+                name: 'RSA-OAEP',
+                modulusLength: 2048, //can be 1024, 2048, or 4096
+                publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
+                hash: {name: 'SHA-512'} //can be "SHA-1", "SHA-256", "SHA-384", or "SHA-512"
+            },
+            true, //whether the key is extractable (i.e. can be used in exportKey)
+            ['encrypt', 'decrypt'] //must be ["encrypt", "decrypt"] or ["wrapKey", "unwrapKey"]
+        ).then(function (key) {
+            window.crypto.subtle
+                .exportKey('pkcs8', key.privateKey)
+                .then(function (keydata1) {
+                    window.crypto.subtle
+                        .exportKey('spki', key.publicKey)
+                        .then(function (keydata2) {
+                            var privateKey = convertText(keydata1, 1)
 
-                                var publicKey = convertText(keydata2)
+                            var publicKey = convertText(keydata2)
 
-                                resolve({ privateKey, publicKey })
-                            })
-                            .catch(function(err) {
-                                reject(err)
-                            })
-                    })
-                    .catch(function(err) {
+                            resolve({privateKey, publicKey})
+                        }).catch(function (err) {
                         reject(err)
                     })
-            })
-            .catch(function(err) {
+                }).catch(function (err) {
                 reject(err)
             })
+        }).catch(function (err) {
+            reject(err)
+        })
     })
 }
+
+/**
+ * rsa加密
+ * @param publicKey
+ * @param oiginData
+ */
+const rsaEncrypt = (publicKey, oiginData) => {
+    const encryptor = new JSEncrypt();
+    encryptor.setPublicKey(publicKey);
+    return encryptor.encrypt(oiginData);
+}
+
+/**
+ * rsa解密
+ * @param privateKey
+ * @param encryptData
+ */
+const rsaDecrypt = (privateKey, encryptData) => {
+    const encryptor = new JSEncrypt();
+    encryptor.setPrivateKey(privateKey);
+    return encryptor.decrypt(encryptData);
+}
+
 const convertText = (buffer, isPrivate = 0) => {
     var binary = ''
     var bytes = new Uint8Array(buffer)
@@ -70,7 +76,8 @@ const convertText = (buffer, isPrivate = 0) => {
 }
 
 export {
+    getRsaKeys,
     rsaEncrypt,
     rsaDecrypt,
-    getRsaKeys
+
 }

package/lib/utils/ssoUtils.ts

@@ -9,7 +9,7 @@ const getSsoLoginUrl = (redirectUrl = '') => {
     let ssoLoginUrl = ((window as any).$config?.apiFullBaseUrl ?? '') + '/sso-api/server/sso/login';
     if (!redirectUrl) {
         ssoLoginUrl += `?redirectUrl=${encodeURIComponent(window.location.href)}`;
-    } else if (redirectUrl) {
+    } else {
         ssoLoginUrl += `?redirectUrl=${encodeURIComponent(redirectUrl)}`;
     }
     return ssoLoginUrl;
@@ -33,18 +33,22 @@ const getSsoLoginRoutePath = (redirectRoutePath = '') => {
     let ssoLoginRoutePath = '/sso/login';
     if (!redirectRoutePath) {
         ssoLoginRoutePath += `?redirectRoutePath=${encodeURIComponent('/sso/login-success')}`;
-    } else if (redirectRoutePath) {
+    } else {
         ssoLoginRoutePath += `?redirectRoutePath=${encodeURIComponent(redirectRoutePath)}`;
     }
     return ssoLoginRoutePath;
 }
 
+/**
+ * 获取sso加密参数
+ * @param password
+ */
 const getSsoEncrypt = (password = '') => {
     let gatewayPublicKey = localStorage.getItem('gatewayPublicKey');
     // 每次请求生成aeskey
     let aesKey = getAesRandomKey();
     // 用登陆后后端生成并返回给前端的的RSA密钥对的公钥将AES16位密钥进行加密
-    const rsaAesKey = rsaEncrypt(aesKey, gatewayPublicKey);
+    const rsaAesKey = rsaEncrypt(gatewayPublicKey, aesKey);
     // 使用AES16位的密钥将请求报文加密（使用的是加密前的aes密钥）
     const encryptPassword = aesEncrypt(aesKey, password);
 

package/lib/utils/vueRouterUtils.ts

@@ -0,0 +1,30 @@
+const getExceptionRoutes = () => {
+    return [
+        {
+            path: '/exception/403',
+            component: () => import('../../src/views/exception/403/index.vue'),
+            meta: {
+                title: '403'
+            }
+        },
+        {
+            path: '/exception/500',
+            component: () => import('../../src/views/exception/500/index.vue'),
+            meta: {
+                title: '500'
+            }
+        },
+        {
+            path: '/:path(.*)*',
+            component: () => import('../../src/views/exception/404/index.vue'),
+            meta: {
+                title: '404'
+            }
+        }
+    ];
+
+}
+
+export {
+    getExceptionRoutes
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuang-framework-ui-common",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": false,
   "type": "module",
   "scripts": {
@@ -33,6 +33,7 @@
     "jsencrypt": "^3.3.2",
     "moment": "^2.30.1",
     "pinia": "^2.1.7",
+    "vant": "^4.9.8",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },

package/src/App.vue

@@ -1,11 +1,20 @@
 <template>
-<RouterView/>
+<RouterView v-if="isShowRouterView"/>
 </template>
 <script setup lang="ts">
 import {RouterView} from 'vue-router'
+import {onBeforeMount, ref, getCurrentInstance} from 'vue';
+import {initGateway} from '../lib/utils/gatewayUtils'
 
-</script>
+let isShowRouterView = ref(false);
+
+const {proxy} = getCurrentInstance() as object;
 
+onBeforeMount(async () => {
+  await initGateway();
+  isShowRouterView.value = true;
+})
+</script>
 
 <style scoped>
 

package/src/main.ts

@@ -4,13 +4,15 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import {initConfig} from '../lib/config/initConfig';
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 
-app.use(ElementPlus)
+
+initConfig(app);
 
 app.mount('#app')
 

package/src/router/index.ts

@@ -1,9 +1,27 @@
 import {createRouter, createWebHistory} from 'vue-router'
+import {getExceptionRoutes} from '../../lib/utils/vueRouterUtils'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
+        {
+            path: '/utils/aes-utils',
+            component: () => import('@/views/utils/aes-utils.vue')
+        },
+        {
+            path: '/utils/rsa-utils',
+            component: () => import('@/views/utils/rsa-utils.vue')
+        },
+        {
+            path: '/utils/sso-utils',
+            component: () => import('@/views/utils/sso-utils.vue')
+        },
+        {
+            path: '/utils/message-utils',
+            component: () => import('@/views/utils/message-utils.vue')
+        },
 
+        ...getExceptionRoutes()
     ]
 })