一个前端对应了六个后端写的公众号代码

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

先说下原委：因为公司人员受限，一个前端对应了六个后端，迫不得已结合后端整理了一套配置多个公众号的代码。

需求：

1：从总赛区登录的可以访问每一个赛区（公众号），其他赛区只能访问本赛区
2:判断用户所在的赛区，找到了某个赛区直接进入，并且标记 
3:分赛区的的选手如果在不同的赛区账户有资金的都要在总赛区进行显示 
4:登录进去，默认进入一级页面，在一级页面跳入二级页面时是进入对应赛区的页面的公众号。 
5：一套代码配置不同的赛区。

如果是你接到这个需求你会怎么处理呢？有一说一，开始拿到这个需求的时候我是很不乐意的，本来就忙的不可开交，还要额外加一些稀奇古怪耗时费力的需求，但是没办法，人在屋檐下不得不低头，接了！

解决方案

验证码登录轮询

用户输入手机号进行轮询手机号是否存在，存在方可以下一步。

# env
# 测试环境（# 开发环境同理）

VUE_APP_SERVERS=[
{"name":"总赛区-out","url":"https://out.***All***.cn","money":0},
{"name":"A赛区-out","url":"https:////out.***A***.cn","money":0},
{"name":"B赛区-out","url":"https:////out.***B***.cn","money":0},
{"name":"C赛区-out","url":"https:////out.***C***.cn","money":0},
{"name":"D赛区-out","url":"https:////out.***D***.cn","money":0}
]

// 数据
data(){
    servers: JSON.parse(process.env.VUE_APP_SERVERS),
    isExist：false,
    index:0
}

// 方法
onChange () {
      if (this.mobilePhone) {
        this.doPhone()
      }
    },
    doPhone () {
      this.$nextTick(function () {
        this.index = 0
        this.isExist = false
        let length = this.servers.length
        for (var i = 0; i < length; i++) {
          this.requestPhone(this.servers[i], this.doTimes)
        }
      })
    },
    doTimes () {
      this.index++
      if (this.servers.length === this.index) {
        if (!this.isExist) {
          this.showTip('选手不存在!')
          this.isCodeSending = true
        } else {
          this.isCodeSending = false
        }
      }
    },
     //判断手机号是否注册
    requestPhone (server, callback) {
      const vm = this
      vm.$axios
        .get(
          server.url + `/mobileExists/${vm.mobilePhone}`
        )
        .then(function (response) {
          if (response.data.code === '200') {
            if (response.data.obj) {
              vm.isExist = true
              setLocalStorageItem('server', JSON.stringify(server))
            }
          }
          callback()
        })
    }

登录跳一级页面

 Login () {
      const vm = this
      const params = {
        mobilePhone: vm.mobilePhone,
        smsCode: vm.smsCode
      }
      vm.loading = true
      vm.$axios
        .post(vm.useUrl + '/login', params)
        .then(function (response) {
          const { obj: loginInfo, code, msg } = response.data
            const token = loginInfo.newToken
            localStorage.setItem('newToken', token)
            vm.$router.push('pageIndex1')
            vm.loading = false
        })
    }

刷新token跳二级页面（即对应的公众号）

 <div v-for="server in servers">
        <li class="cf" v-if="server.money > 0">
          <span>
            <em>{{ server.name }}总奖金</em>
            <br />
            <em>{{ server.money }}</em>
          </span>
          <button @click="clickReceive(server.url)">前往领取</button>
        </li>
 </div>

  clickReceive (url) {
      const vm = this
      vm.$axios
        .get(url + '/getLoginToken', {
          headers: { newToken: localStorage.getItem('newToken') }
        })
        .then(response => {
            const token = response.data.obj.token
            vm.login({ token });
            localStorage.setItem('token',token)
               window.location.href =
              url + `/#/pageIndex2?serverUrl=${serverUrl}&token=${token}`
        })
    }

二级页面退回一级页面

   goBack () {
      const vm = this
      window.location.href = decodeURIComponent(
        getLocalStorageItem('serverUrl')
      )
    }

TIP: 简单实现，相信很多大佬还有很多的方式，仅供参考！