- 后台管理登录页添加一个微信登录按钮,点击弹窗二维码
代码实现:
/**
* 该页面原本是用户协议页(产线页面),目前接入微信授权登录功能
* 原因:微信扫码登录,后端生成的二维码仅能跳转当前 生产环境小程序 存在的页面,而此功能开发时,当前生产环境不存在授权页,因此只能用现有的页面进行开发
* 后续:1.此版本提交一个空白页,下个版本将此页面转移到新提交的空白页
* 2.另加一页空白页,以备今后版本不时之需
* 3.由于有“打包时过滤无依赖文件”的设定,新家的备用页需要在某个恒为false的条件下进行引用,以跳过此过滤
*/
async handlewxLogin () {
console.log('点击按钮')
// 1、请求后端接口,获取一个唯一的标识flagId
const flagId = await this.$service.wxpc.getflagId()
// 2、生成小程序码(需传入小程序已经发布版本的页面)
const res = await this.$service.wxpc.getloginQr({ page: 'pages/login/user-agreement', scene: flagId })
this.qrData = config.API_BASE_URL + res.replace('api', '')
this.wxVisible = true
// 3、轮训判断是否已登录
let time = ''
time = setInterval(async () => {
const userInfo = await this.$service.wxpc.getqueryFlag({ flagId })
if (userInfo && userInfo.token) {
// 保存token
await this.$store.dispatch('user/setToken', userInfo.token)
// 跳转首页
this.$router.push('/')
// 登录有token 清除定时器
clearInterval(time)
}
}, 1500)
}
- 小程序中在已经发布的旧页面中写微信登录页面(之后发布新版可以移到登录页),点击按钮登录后,pc的轮询接口能通过flagId同步得到token登录。
代码实现:
onLoad(options => {
const scene = options?.scene || '' // 跟主要登录无关,用于判断旧页面其他功能
if (!scene) return
if (scene) {
// 微信扫码登录
uni.setNavigationBarTitle({ title: '授权登录' })
flagId.value = scene
pageType.value = 'login' // 判断登录模块功能
// getCode()
}
})
// 1、点击登录按钮
const submitLogin = async function (event: any) {
console.log('点击按钮', event)
const { encryptedData, iv } = event.detail
if (encryptedData == null || iv == null) return uni.showToast({ icon: 'none', title: '需要允许获取用户手机号授权' })
requestLogin(event)
}
// 2、执行登录
async function requestLogin (event: any) {
if (!flagId.value) return
const { encryptedData, iv } = event.detail
// 3、授权登录
const userInfo = await service.app.loginByPcWeixin({
flagId: flagId.value,
encryptedData,
iv
})
console.log({ userInfo })
// 4、登录的逻辑 比如存储token、跳转路由
logicFuntion(userInfo)
}