支持不同域的前后端分离部署

2023-03-15 19:05:56 +08:00
parent 95688e400b
commit 5fab97cf7e
23 changed files with 226 additions and 155 deletions
--- a/web_src/package-lock.json
+++ b/web_src/package-lock.json
@@ -23,7 +23,7 @@
        "vue-clipboard2": "^0.3.1",
        "vue-clipboards": "^1.3.0",
        "vue-contextmenujs": "^1.3.13",
-        "vue-cookies": "^1.7.4",
+        "vue-cookies": "^1.8.3",
        "vue-giant-tree": "^0.1.5",
        "vue-router": "^3.1.6",
        "vue-ztree-2.0": "^1.0.4"
@@ -13135,9 +13135,9 @@
      "integrity": "sha1-O9rgI8e9QgleeNpCWAACUNUKuO8="
    },
    "node_modules/vue-cookies": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npm.taobao.org/vue-cookies/download/vue-cookies-1.7.4.tgz?cache=0&sync_timestamp=1598941352058&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-cookies%2Fdownload%2Fvue-cookies-1.7.4.tgz",
-      "integrity": "sha1-0kHQoEMdoHlYN2UdELTXPnyNPo0="
+      "version": "1.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-cookies/-/vue-cookies-1.8.3.tgz",
+      "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
    },
    "node_modules/vue-giant-tree": {
      "version": "0.1.5",
@@ -25489,9 +25489,9 @@
      "integrity": "sha1-O9rgI8e9QgleeNpCWAACUNUKuO8="
    },
    "vue-cookies": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npm.taobao.org/vue-cookies/download/vue-cookies-1.7.4.tgz?cache=0&sync_timestamp=1598941352058&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-cookies%2Fdownload%2Fvue-cookies-1.7.4.tgz",
-      "integrity": "sha1-0kHQoEMdoHlYN2UdELTXPnyNPo0="
+      "version": "1.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-cookies/-/vue-cookies-1.8.3.tgz",
+      "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
    },
    "vue-giant-tree": {
      "version": "0.1.5",
--- a/web_src/package.json
+++ b/web_src/package.json
@@ -25,7 +25,7 @@
    "vue-clipboard2": "^0.3.1",
    "vue-clipboards": "^1.3.0",
    "vue-contextmenujs": "^1.3.13",
-    "vue-cookies": "^1.7.4",
+    "vue-cookies": "^1.8.3",
    "vue-giant-tree": "^0.1.5",
    "vue-router": "^3.1.6",
    "vue-ztree-2.0": "^1.0.4"
--- a/web_src/src/App.vue
+++ b/web_src/src/App.vue
@@ -5,6 +5,7 @@
 </template>

 <script>
+import  userService from './components/service/UserService'
 export default {
  name: 'app',
  data(){
@@ -19,7 +20,7 @@ export default {
    }
  },
  created() {
-    if(!this.$cookies.get("session")){
+    if (userService.getToken() == null){
      //如果没有登录状态则跳转到登录页
      this.$router.push('/login');
    }
@@ -33,28 +34,14 @@ export default {
    // this.getUserInfo();
  },
  methods: {
-    //请求用户的一些信息
-    getUserInfo(){
-      var userinfo = this.$cookies.get("session");
-    },
    checkLogin(){
      //检查是否存在session
-      //cookie操作方法在源码里有或者参考网上的即可
-      if(!this.$cookies.get("session")){
+      if (userService.getToken() == null){
        //如果没有登录状态则跳转到登录页
-        this.$router.push('/login');
+        // this.$router.push('/login');
      }
+
    },
-    getCookie: function (cname) {
-      var name = cname + "=";
-      var ca = document.cookie.split(';');
-      for (var i = 0; i < ca.length; i++) {
-        var c = ca[i];
-        while (c.charAt(0) == ' ') c = c.substring(1);
-        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
-      }
-      return "";
-    }
  },
  components: {}
 };
--- a/web_src/src/components/Login.vue
+++ b/web_src/src/components/Login.vue
@@ -35,6 +35,7 @@

 <script>
 import crypto from 'crypto'
+import userService from "./service/UserService";
 export default {
  name: 'Login',
  data(){
@@ -85,9 +86,10 @@ export default {
        params: loginParam
      }).then(function (res) {
        window.clearTimeout(timeoutTask)
-        console.log(JSON.stringify(res));
+        console.log(res);
+        console.log("登录成功");
          if (res.data.code === 0 ) {
-            that.$cookies.set("session", {"username": that.username,"roleId":res.data.data.role.id}) ;
+            userService.setUser(res.data.data)
            //登录成功后
            that.cancelEnterkeyDefaultAction();
            that.$router.push('/');
@@ -106,14 +108,6 @@ export default {
        that.isLoging = false;
      });
    },
-    setCookie: function (cname, cvalue, exdays) {
-      var d = new Date();
-      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
-      var expires = "expires=" + d.toUTCString();
-      console.info(cname + "=" + cvalue + "; " + expires);
-      document.cookie = cname + "=" + cvalue + "; " + expires;
-      console.info(document.cookie);
-    },
    cancelEnterkeyDefaultAction: function() {
        document.onkeydown = function(e) {
        var key = window.event.keyCode;
--- a/web_src/src/components/dialog/changePassword.vue
+++ b/web_src/src/components/dialog/changePassword.vue
@@ -35,6 +35,7 @@

 <script>
 import crypto from 'crypto'
+import userService from "../service/UserService";
 export default {
  name: "changePassword",
  props: {},
@@ -105,7 +106,7 @@ export default {
          this.showDialog = false;
          setTimeout(()=>{
            // 删除cookie，回到登录页面
-            this.$cookies.remove("session");
+            userService.clearUserInfo();
            this.$router.push('/login');
            this.sseSource.close();
          },800)
--- a/web_src/src/components/dialog/importChannel.vue
+++ b/web_src/src/components/dialog/importChannel.vue
@@ -16,6 +16,7 @@
          drag
          :action="uploadUrl"
          name="file"
+          :headers="headers"
          :on-success="successHook"
          :on-error="errorHook"
          >
@@ -33,6 +34,8 @@

 import ShowErrorData from './importChannelShowErrorData.vue'

+import userService from "../service/UserService";
+
 export default {
  name: "importChannel",
  components: {
@@ -47,7 +50,10 @@ export default {
      isEdit: false,
      errorStreams: [],
      errorGBIds: [],
-      uploadUrl: process.env.NODE_ENV === 'development'?`debug/api/push/upload`:`api/push/upload`,
+      headers: {
+        "access-token": userService.getToken()
+      },
+      uploadUrl: process.env.NODE_ENV === 'development'? `http://127.0.0.1:8080/debug/api/push/upload`: (window.baseUrl ? window.baseUrl : "") + `/api/push/upload`,
    };
  },
  methods: {
--- a/web_src/src/components/service/UserService.js
+++ b/web_src/src/components/service/UserService.js
@@ -0,0 +1,42 @@
+
+export default {
+
+  /**
+   * 存储用户信息
+   * @param username
+   * @param token
+   */
+  setUser(user){
+    localStorage.setItem("wvp-user", JSON.stringify(user));
+  },
+
+  /**
+   * 获取用户
+   */
+  getUser(){
+    return JSON.parse(localStorage.getItem("wvp-user"));
+  },
+
+
+  /**
+   * 获取登录token
+   */
+  getToken(){
+    return localStorage.getItem("wvp-token");
+  },
+
+  /**
+   * 清理用户信息
+   */
+  clearUserInfo(){
+    localStorage.removeItem("wvp-user");
+    localStorage.removeItem("wvp-token");
+  },
+  /**
+   * 更新token
+   * @param header
+   */
+  setToken(token) {
+    localStorage.setItem("wvp-token", token);
+  }
+}
--- a/web_src/src/layout/UiHeader.vue
+++ b/web_src/src/layout/UiHeader.vue
@@ -23,9 +23,9 @@
      <!--            </el-submenu>-->
      <!--            <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>-->
      <el-submenu index="" style="float: right;">
-        <template slot="title">欢迎，{{ this.$cookies.get("session").username }}</template>
+        <template slot="title">欢迎，{{ username }}</template>
        <el-menu-item @click="openDoc">在线文档</el-menu-item>
-        <el-menu-item >
+        <el-menu-item>
          <el-switch v-model="alarmNotify" inactive-text="报警信息推送" @change="alarmNotifyChannge"></el-switch>
        </el-menu-item>
        <el-menu-item @click="changePassword">修改密码</el-menu-item>
@@ -39,6 +39,7 @@
 <script>

 import changePasswordDialog from '../components/dialog/changePassword.vue'
+import userService from '../components/service/UserService'

 export default {
  name: "UiHeader",
@@ -47,14 +48,17 @@ export default {
    return {
      alarmNotify: false,
      sseSource: null,
+      username: userService.getUser().username,
      activeIndex: this.$route.path,
-      editUser: this.$cookies.get("session").roleId==1
+      editUser: userService.getUser() ? userService.getUser().role.id === 1 : false
    };
  },
  created() {
-    console.log(this.$cookies.get("session"))
+    console.log(4444)
+    console.log(JSON.stringify(userService.getUser()))
    if (this.$route.path.startsWith("/channelList")) {
      this.activeIndex = "/deviceList"
+
    }
  },
  mounted() {
@@ -69,10 +73,13 @@ export default {
        method: 'get',
        url: "/api/user/logout"
      }).then((res) => {
-        // 删除cookie，回到登录页面
-        this.$cookies.remove("session");
+        // 删除用户信息，回到登录页面
+        userService.clearUserInfo()
        this.$router.push('/login');
-        this.sseSource.close();
+        if (this.sseSource != null) {
+          this.sseSource.close();
+        }
+
      }).catch((error) => {
        console.error("登出失败")
        console.error(error)
@@ -151,16 +158,19 @@ export default {
 </script>
 <style>
 #UiHeader .el-switch__label {
-  color: white ;
+  color: white;
 }
+
 .el-menu--popup .el-menu-item .el-switch .el-switch__label {
  color: white !important;
 }
-#UiHeader .el-switch__label.is-active{
+
+#UiHeader .el-switch__label.is-active {
  color: #409EFF;
 }
+
 #UiHeader .el-menu-item.is-active {
-  color: #fff!important;
-  background-color: #1890ff!important;
+  color: #fff !important;
+  background-color: #1890ff !important;
 }
 </style>
--- a/web_src/src/main.js
+++ b/web_src/src/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import App from './App.vue';
+
 Vue.config.productionTip = false;
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
@@ -10,15 +11,16 @@ import echarts from 'echarts';
 import VCharts from 'v-charts';

 import VueClipboard from 'vue-clipboard2';
-import { Notification } from 'element-ui';
+import {Notification} from 'element-ui';
 import Fingerprint2 from 'fingerprintjs2';
 import VueClipboards from 'vue-clipboards';
 import Contextmenu from "vue-contextmenujs"
+import userService from "./components/service/UserService"


 // 生成唯一ID
-Fingerprint2.get(function(components) {
-  const values = components.map(function(component,index) {
+Fingerprint2.get(function (components) {
+  const values = components.map(function (component, index) {
    if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
      return component.value.replace(/\bNetType\/\w+\b/, '');
    }
@@ -42,13 +44,17 @@ Vue.prototype.$notify = Notification;
 Vue.use(Contextmenu);
 Vue.use(VCharts);

-axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : (window.baseUrl?window.baseUrl:"");
+axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : (window.baseUrl ? window.baseUrl : "");
 axios.defaults.withCredentials = true;
 // api 返回401自动回登陆页面
-axios.interceptors.response.use(function (response) {
+axios.interceptors.response.use((response) => {
  // 对响应数据做点什么
+  let token = response.headers["access-token"];
+  if (token) {
+    userService.setToken(token)
+  }
  return response;
-}, function (error) {
+}, (error) => {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    console.log("Received 401 Response")
@@ -56,10 +62,22 @@ axios.interceptors.response.use(function (response) {
  }
  return Promise.reject(error);
 });
+axios.interceptors.request.use(
+  config => {
+    if (userService.getToken() != null && config.url !== "/api/user/login") {
+      config.headers['access-token'] = `${userService.getToken()}`;
+    }
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
 Vue.prototype.$axios = axios;
 Vue.prototype.$cookies.config(60*30);

 new Vue({
-	router: router,
-	render: h => h(App),
+  router: router,
+  render: h => h(App),
 }).$mount('#app')