本文已参与「新人创作礼」活动,一起开启掘金创作之路。
先说下原委:因为公司人员受限,一个前端对应了六个后端,迫不得已结合后端整理了一套配置多个公众号的代码。
需求:
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: 简单实现,相信很多大佬还有很多的方式,仅供参考 !