module-menu-vue 0.0.22 → 0.0.25

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "module-menu-vue",
-  "version": "0.0.22",
+  "version": "0.0.25",
   "description": "城市大数据平台菜单--Vue版",
   "main": "/index.js",
   "scripts": {
+    "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"

package/src/components/Menu/ModuleMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class='menuPopupAndTitle'>
-            <div class='menuIcon' @mouseenter="showMenuList = true" @mouseleave="showMenuList =false">
+            <div class='menuIcon' @mouseenter="showMenuList = true" @mouseleave="showMenuList = false">
                 <img class="menuIcon_img" :src="menuIconSrc" />
             </div>
             <div class="menu_title_content" v-show="showCollapse" @click="toHref()">
@@ -9,7 +9,7 @@
                 <span class="menu_title">{{getLogoAndTitle().title}}</span>
             </div>
         </div>
-        <div class='menu_list_content' :style="{ display: showMenuList ? 'block' : 'none' }">
+        <div class='menu_list_content' :style="{ display: showMenuList ? 'block' : 'none' }" @mouseenter="showMenuList = true" @mouseleave="showMenuList = false">
             <div v-for="(item, index) in menuList" :key="item.path">
               <div :key="item.name" class="cardLine" :style="{height: item.children.length > 3 ? '90px' : ''}">
                 <div class='leftMenu'
@@ -138,6 +138,9 @@ export default {
             case "消息中心":
                 thirdPartyServiceJumpPath = "/alert/";
                 break;
+            case "数据安全":
+                thirdPartyServiceJumpPath = "/datasecurity/";
+                break;
             default:
                 break;
         }

package/src/components/Menu/constant.js

@@ -94,10 +94,20 @@ export const menuList = [{
         childName: '消息中心',
         path: '/alert',
         url:require('../../assets/alert_slogo.svg'),
+    },
+    {
+        childName: '数据安全',
+        path: '/datasecurity',
+        url:require('../../assets/ic_shujuanquan.png'),
     }]
 }];
 export const menuIconSrc = require('../../assets/menuIcon.svg');
 export const sysNameMap = [
+    {
+        sysName: 'datasecurity',
+        title: '数据安全',
+        logoSrc: require('../../assets/ic_shujuanquan.png'),
+    },
     {
         sysName: 'datacollection',
         title: '数据集成',

package/src/components/User/UserInfo.vue

@@ -26,10 +26,8 @@
 </template>
 
 <script >
-// import {logout} from './service.js'
 import {userMenuIcon} from './constant.js'
-import { getStore } from '../Util/userInfo.js';
-import axios from 'axios'
+import { logout } from '../Util/permessionUtils'
 export default {
     name: 'UserInfo',
     data () {
@@ -60,30 +58,7 @@ export default {
             window.location.href = url;
         },
         logoutFunc () {
-            const config = {
-                headers: {}
-            }
-            // const TENANT_ID = getStore({ name: "tenantId" }) || '1';
-            const isToken = (config.headers || {}).isToken === false;
-            const token = getStore({ name: 'access_token' });
-            if (token && !isToken) {
-                config.headers["Authorization"] = `Bearer ${token}`; // token
-            }
-            // if (TENANT_ID) {
-            //     config.headers["TENANT-ID"] = TENANT_ID; // 租户ID
-            // }
-            sessionStorage.clear();
-            localStorage.clear();
-            axios({
-                method: 'delete',
-                url: '/auth/token/logout',
-                ...config
-            }).then(res => {
-                console.log('res', res)
-                this.$router.push({ path: "/login" });
-            }).catch((err) => {
-                console.error(err)
-            })
+            logout()
         },
         getUserName ()  {
             const userInfo = JSON.parse(sessionStorage.getItem('bigdata-userInfo')||"{}");

package/src/components/Util/axios.js

@@ -0,0 +1,89 @@
+import axios from 'axios';
+import baseCof from './config';
+import getStore from './userInfo';
+import { checkToken} from './permessionUtils';
+
+let tokenValue = '574536b1-5832-417b-b909-82e204679d67';
+
+axios.interceptors.response.use(
+  (response) => {
+    if (response.status === 200) {
+      return response;
+    } else if (response.status === 401 || response.status === 302 || response.status === 403) {
+      if (process.env.NODE_ENV === 'production') {
+        tokenValue = getStore({ name: 'access_token' });
+      }
+      checkToken(tokenValue);
+    } else {
+      console.log('接口异常 response');
+      return Promise.reject('error');
+    }
+  },
+  (error) => {
+    console.log('error', error)
+    if (error.response) {
+      if (error.response.status === 401) {
+        if (process.env.NODE_ENV === 'production') {
+          tokenValue = getStore({ name: 'access_token' });
+        }
+        checkToken(tokenValue);
+      } else if (error.response.status === 403) {
+        // 提示无权限等
+      } else {
+        // 其他错误处理
+      }
+    }
+    console.log('=========', JSON.stringify(error.response))
+    return Promise.reject(error.response?.data);
+  },
+);
+
+/** 全局请求拦截器 */
+axios.interceptors.request.use(
+  async (params) => {
+    // 生产环境，对接门户时，需要在请求头中设置token等信息
+    if (process.env.NODE_ENV === 'production') {
+      const TENANT_ID = getStore({ name: 'tenantId' }) || '1';
+      const isToken = (params.headers || {}).isToken === false;
+      const token = getStore({ name: 'access_token' });
+      if (!(token && !isToken) || !TENANT_ID) {
+        // 如果是调用退出登录接口，则不再执行退出登录逻辑，防止出现重复调用退出登录的循环
+        return params;
+      }
+      params.headers['Authorization'] = `Bearer ${token}`;
+      params.headers['TENANT-ID'] = TENANT_ID;
+      return params;
+    }
+    params.headers['Authorization'] = `Bearer ${tokenValue}`;
+    params.headers['TENANT-ID'] = 1;
+    console.log('params', JSON.stringify(params))
+    return params;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  },
+);
+
+function Axios(method, api) {
+  let httpDefult = {};
+  // 退出登录
+  httpDefult = {
+    method: method,
+    url: `${baseCof.baseSever}${api}`,
+    params: '',
+  };
+  console.log('httpDefult', JSON.stringify(httpDefult))
+
+  return new Promise((resolve, reject) => {
+    axios(httpDefult)
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  })
+}
+
+export default Axios;

package/src/components/Util/config.js

@@ -0,0 +1,10 @@
+const address = window.location.hostname
+const port = window.location.port
+const baseCof = process.env.NODE_ENV === 'production' ?{
+  baseSever: `https://${address}:${port}`,
+  basePath: `/app/cmcc/data`,
+}:{
+    baseSever: 'http://localhost:8000',
+    basePath: '/cmcc/data',
+};                                                                                                                                                     
+export default baseCof;

package/src/components/Util/permessionUtils.js

@@ -0,0 +1,29 @@
+import Axios from './axios';
+
+const DEFAULT_LOGOUT_URL = '/#/login'
+// 退出登录
+export const logout = () => {
+  console.log('调用了。。。')
+  Axios('delete','/auth/token/logout', '', {})
+    .then(() => {
+      console.log('调用成功')
+      localStorage.clear();
+      sessionStorage.clear();
+      window.location.href = DEFAULT_LOGOUT_URL;
+    })
+    .catch((error) => {
+      console.log('调用失败')
+      console.error('Error while logging out, error:', error);
+    });
+}
+// 校验token是否失效
+export const checkToken = (token) => {
+  Axios('get',`/auth/oauth/check_token?token=${token}`, '', {} )
+  .then().catch(() =>{
+      this.$message.error({content:'用户凭证已过期，请重新登录', onClose: ()=>{
+          localStorage.clear();
+          sessionStorage.clear();
+          window.location.href = DEFAULT_LOGOUT_URL;
+        }});
+      })
+}

package/vue.config.js

@@ -2,3 +2,46 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true
 })
+// const url = 'https://192.168.108.86:30011/'
+// module.exports = {
+//   lintOnSave: true,
+//   productionSourceMap: false,
+//   css: {
+//     // 忽略 CSS order 顺序警告
+//     extract: { ignoreOrder: true },
+//     // 查看CSS属于哪个css文件
+//     sourceMap: process.env.NODE_ENV === "development",
+//   },
+//   configureWebpack: () => {
+//     if (process.env.NODE_ENV === "production") {
+//       // 仅在生产环境下启用该配置
+//       return {
+//         performance: {
+//           // 打包后最大文件大小限制
+//           maxAssetSize: 1024000,
+//         },
+//       };
+//     } else if (process.env.NODE_ENV === "development") {
+//       return {
+//         devtool: "source-map",
+//       };
+//     }
+//   },
+//   // 配置转发代理
+//   devServer: {
+//     // disableHostCheck: true,
+//     port: 8080,
+//     proxy: {
+//       "/": {
+//         // target:' https://10.136.106.82:30011',
+//         target: url,
+//         ws: false, // 需要websocket 开启
+//         // changOrigin: true,  //允许跨域
+//         pathRewrite: {
+//           "^/": "/",
+//         },
+//       },
+//       // 3.5 以后不需要再配置
+//     },
+//   },
+// };