实现多站点公用同一后台

assets/util/index.js

@@ -1,7 +1,8 @@
 import settings from "../../settings"
 export const getAuthen = () =>{
+  console.log(this)
   const path = window.location.pathname === "/authen" ? "/" : window.location.pathname
-  const search = window.location.search.replace("?","abc").replace(/&/g,"def").replace(/=/g,"ghi")
+  const search = window.location.search.replace("?",".").replace(/&/g,"-").replace(/=/g,"_")
 
   window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + settings.appId + "&redirect_uri=" + settings.url + "%2fauthen&response_type=code&scope=snsapi_userinfo&state="+ path + search  +"#wechat_redirect"
 }

pages/authen.vue

@@ -6,6 +6,7 @@
 import Vue from "vue";
 import { getAuthen } from "../assets/util";
 import querystring from "querystring";
+import { mapMutations, mapActions } from "vuex";
 
 export default Vue.extend({
   head() {
@@ -19,36 +20,58 @@ export default Vue.extend({
     };
   },
   created() {
-    console.log(this.$route);
-    const [url, str] = this.$route.query.state.split("abc")
+    const [url, str] = this.$route.query.state.split(".");
     this.redirect = url;
-    if(str!==undefined){
-      const search = querystring.parse(str.replace(/def/g,"&").replace(/ghi/g,"="));
-      console.log(search)
-    }
-    
-    if (!this.$route.query.code) {
-      getAuthen();
+    if (str !== undefined) {
+      const search = querystring.parse(
+        str.replace(/-/g, "&").replace(/_/g, "=")
+      );
+      if (!search.stationId) {
+        alert("你没有传递站点参数");
+        return;
+      }
+      this.setStationId(search.stationId);
+      if (!!search.appId) {
+        this.setAppId(search.appId);
+        this.havingAuthen();
+      } else {
+        this.getAppId(search.stationId).then(() => {
+          this.havingAuthen();
+        });
+      }
     } else {
-      console.log("-----");
-      console.log(this.$route);
-      this.$store.dispatch("authen/login",this.$route.query.code).then((res)=>{
-        console.log(this.$route.query);
-        this.handleGoto();
-      }).catch((res)=>{
-        alert(res);
-        getAuthen();
-      });
+      alert("你没有传递站点参数");
+      return;
     }
   },
   methods: {
     handleGoto() {
-      console.log("goto")
-      console.log(this.redirect);
       this.$router.replace({
         path: this.redirect,
       });
     },
+    havingAuthen() {
+      if (!this.$route.query.code) {
+        getAuthen();
+      } else {
+        this.$store
+          .dispatch("authen/login", this.$route.query.code)
+          .then((res) => {
+            this.handleGoto();
+          })
+          .catch((res) => {
+            alert(res);
+            getAuthen();
+          });
+      }
+    },
+    ...mapMutations({
+      setStationId: "authen/setStationId",
+      setAppId: "authen/setAppId",
+    }),
+    ...mapActions({
+      getAppId: "authen/getAppId",
+    }),
   },
 });
 </script>

pages/point/success.vue

@@ -26,35 +26,18 @@ export default {
   components: {
     ProductList,
   },
+  created(){
+    this.getAppId(1);
+  },
   mounted() {
     this.getSdkConfig(["openLocation", "getNetworkType"]).then((res) => {
       console.log("测试一下微信jdk");
-      // wx.config(res);
-      // wx.ready(function () {
-      //   console.log("成功了");
-      //   wx.getNetworkType({
-      //     success: function (res) {
-      //       var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
-      //       console.log(networkType);
-      //     },
-      //   });
-      //   wx.openLocation({
-      //     latitude: 0, // 纬度，浮点数，范围为90 ~ -90
-      //     longitude: 0, // 经度，浮点数，范围为180 ~ -180。
-      //     name: "", // 位置名
-      //     address: "", // 地址详情说明
-      //     scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
-      //     infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
-      //   });
-      // });
-      // wx.error(function () {
-      //   console.log("失败了");
-      // });
     });
   },
   methods: {
     ...mapActions({
       getSdkConfig: "authen/getSdkConfig",
+      getAppId:"authen/getAppId"
     }),
   },
 };

store/authen.js

@@ -9,11 +9,12 @@ const timestamp = +moment.utc();
 
 // 带Origin后缀的通过getter获取
 export const state = () => ({
-  openIdOrigin: "oJR5R6gWNpGre5hfPXkFvcdBhIrE",
+  openIdOrigin: "",
   accessTokenOrigin: "",
   unionIdOrigin: "",
   userInfo: {},
-  stationId: settings.stationId,
+  stationIdOrigin: "",
+  appIdOrigin: "",
   noncestr,
   timestamp,
   signature:"",
@@ -32,6 +33,18 @@ export const getters = {
     }
     return state.accessToken
   },
+  stationId: (state) => {
+    if (!state.stationIdOrigin) {
+      getAuthen()
+    }
+    return state.stationIdOrigin
+  },
+  appId: (state) => {
+    if (!state.appIdOrigin) {
+      getAuthen()
+    }
+    return state.appIdOrigin
+  },
   unionId: (state) => {
     if (!state.unionIdOrigin) {
       getAuthen()
@@ -39,8 +52,6 @@ export const getters = {
     return state.unionIdOrigin
   },
   userInfo: (state) => state.userInfo,
-  stationId: (state) => state.stationId,
-
 }
 
 export const mutations = {
@@ -57,7 +68,13 @@ export const mutations = {
     state.userInfo = userInfo
   },
   setSignature(state, signature) {
-    state.state = signature
+    state.signature = signature
+  },
+  setStationId(state,stationId){
+    state.stationIdOrigin = stationId
+  },
+  setAppId(state, appId) {
+    state.appIdOrigin = appId
   }
 }
 
@@ -102,7 +119,7 @@ export const actions = {
         noncestr:state.noncestr,
         timestamp:state.timestamp,
         url:window.location.href.replace(/#(\w|\W){0,}/g, ''),        
-        stationId:state.stationId
+        stationId:getters.stationId
       }
     })
     if(sdkSignRes.retCode !== 0){Promise.reject("获取Sdk签名错误")}
@@ -111,11 +128,25 @@ export const actions = {
 
     return Promise.resolve({
       debug: settings.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-      appId: settings.appId, // 必填，公众号的唯一标识
+      appId: getters.appId, // 必填，公众号的唯一标识
       timestamp: state.timestamp, // 必填，生成签名的时间戳
       nonceStr: state.noncestr, // 必填，生成签名的随机串
       signature:sdkSignRes.data,
       jsApiList // 必填，需要使用的JS接口列表
     })
+  },
+  async getAppId({commit,state, getters},stationId){
+    const appIdRes = await this.$axios.$get("/getStationGzhAppId",{
+      params:{
+        stationId:stationId
+      }
+    })
+    if(appIdRes.retCode !== 0){return Promise.reject("获取appid失败")}
+    commit("setStationId",stationId)
+    commit("setAppId", appIdRes.data.appId)
+    return Promise.resolve({
+      stationId,
+      appId:appIdRes.data.appId
+    })
   }
 }