微信小程序开发mpvue实现授权登录

微信小程序开发mpvue实现授权登录

1. 通过请求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>