微信小程序开发mpvue实现授权登录
-
通过请求wx.login() 在成功回调中获取到code,通过button组件调出getuserinfo 方法,和直接wx调用获取的数值一致,再在其中弹出模态框,诱导用户授权手机,之后将信息发送给后端随后跳转页面
<template> <view class="authorize-contianer"> <div class="auth-item" @click="login">请微信授权</div> <div class="btn-authorize"> <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">确认授权</button> </div> <div v-if="cancelAuth" class="refuse">请授权,否则无法进入哦~</div> <div v-if="isPone" class="alert" > <div class="auth"> <div class="apply"> <span class="">需要获取您的手机权限</span> <p>(请开启手机权限)</p> </div> <button class="confirm" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认</button> </div> </div> </view> </template> <script> import { getToken } from '@/api/main' export default { data () { return { cancelAuth: false,//判断用户是否拒绝获取信息 newType: '', path: '../home/main', shareDetail: {}, code: '', isPone: false //用于显示获取手机权限窗口 } }, methods: { //获取手机号 getPhoneNumber(e) { console.log(e) if (e.mp.detail.errMsg==="getPhoneNumber:ok") { this.isPone = false this.params.iv = e.mp.detail.iv this.params.encryptedData = e.mp.detail.encryptedData console.log(this.params) this.getTokenAsync(this.params) } }, //调用wx.login获取code login() { let me = this let obj = wx.getStorageSync('USER_INFO') console.log(obj, 'USER_INFOUSER_INFO') if (obj) { wx.switchTab({ url: this.path }) } else { wx.login({ success (res) { if (res.code) { me.code = res.code } } }) } }, // 请求后获取token async getTokenAsync(params) { let res = await getToken(params) if (res.success) { wx.setStorageSync('USER_INFO', JSON.stringify(res.data)) wx.switchTab({ url: this.path }) } else { console.log("获取失败") } }, // 调用用户信息授权页面 bindGetUserInfo(e) { if (!this.cancelAuth) { this.isPone = true } wx.setStorageSync('USER_MSG', JSON.stringify(e.mp.detail.userInfo)) console.log(e) if (e.mp.detail.userInfo) { this.params = { code: this.code, name: e.mp.detail.userInfo.nickName, userIcon: e.mp.detail.userInfo.avatarUrl, } } else { // 用户按了拒绝按钮 this.cancelAuth = true } } }, onShow () { this.path ='../home/main' this.login() } } </script> <style lang="scss"> .authorize-contianer { height: 100%; background: #fff; background-size:100% 100%; text-align: center; .authorize-icon { padding-top: 254rpx; width: 200rpx; height: 200rpx; display: block; margin: 0 auto; padding-bottom: 10rpx; } .auth-item { margin-top:92rpx; font-size: 36rpx; line-height:40rpx; color:rgb(255,145,37); font-weight: bold; } .refuse{ padding:18rpx 0; font-size:24rpx; width:80%; margin:0rpx auto; background:#000000d1; color:#fff; margin-top:140rpx; border-radius:6rpx; } .btn-authorize { margin: 0 auto; margin-top:160rpx; button{ width: 80%; background:-webkit-linear-gradient(left,rgb(255,152,22),rgb(255,120,17)); background:-o-linear-gradient(right,rgb(255,152,22),rgb(255,120,17)); background:-moz-linear-gradient(right,rgb(255,152,22),rgb(255,120,17)); background:linear-gradient(to right,rgb(255,152,22),rgb(255,120,17)); border-radius: 40rpx; color:rgb(255,255,255); font-size: 34rpx; font-weight: bold; } } .alert{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; outline: 0; -webkit-overflow-scrolling: touch; background-color: rgb(0, 0, 0); filter: alpha(opacity=60); background-color: rgba(0, 0, 0, 0.6); z-index: 9999; .auth{ position: absolute; top: 50%; left: 50%; width: 80%; height: 340rpx; border-radius: 20rpx; transform:translate(-50%,-50%); background: #fff; display: flex; flex-direction: column; .apply{ margin: 0rpx auto; padding: 60rpx 40rpx; flex:1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: 34rpx; color:rgb(34,34,34); p{ font-size:30rpx } } .confirm{ text-align: center; height: 100rpx; width: 100%; line-height: 100rpx; font-size: 34rpx; color:rgb(255,145,37); } } } } </style>