授权功能模拟

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-13 23:00:28
+ * @LastEditTime: 2022-10-18 16:09:34
  * @FilePath: /swx/src/pages/auth/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div></div>
+  <div>
+    <button wx:if="{{canIUse}}" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权登录</button>
+    <view @tap="auth">授权登陆</view>
+  </div>
 </template>
 
 <script setup>
 import Taro from '@tarojs/taro'
 import { ref } from "vue";
-import request from '../../utils/request';
+import request from '@/utils/request';
+import { userInfo } from 'os';
 
 </script>
 
@@ -45,6 +49,85 @@ export default {
     .catch(err => {
       console.error(err);
     });
+  },
+  data () {
+    return {
+      canIUse: wx.canIUse('button.open-type.getUserInfo')
+    }
+  },
+  onLoad: function() {
+    // 查看是否授权
+    wx.getSetting({
+      success (res){
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
+          wx.getUserInfo({
+            success: function(res) {
+              console.warn(res.userInfo)
+            }
+          })
+        }
+      }
+    })
+  },
+  methods: {
+    bindGetUserInfo (e) {
+      console.warn(e.detail.userInfo)
+    },
+    // auth () {
+    //   Taro.getSetting({
+    //     success: function (res) {
+    //       if (!res.authSetting['scope.userInfo']) {
+    //         console.warn(0);
+    //         Taro.authorize({
+    //           scope: 'scope.userInfo',
+    //           success: function () {
+    //             Taro.getUserInfo({
+    //               success: function(res) {
+    //                 var userInfo = res.userInfo
+    //                 console.warn(userInfo);
+    //               }
+    //             })
+    //           },
+    //           fail: function (error) {
+    //             console.error(error)
+    //           }
+    //         })
+    //       }
+    //     }
+    //   })
+    // }
+    auth () {
+      // wx.getSetting({
+      //   success (res){
+      //     if (res.authSetting['scope.userInfo']) {
+      //       // 已经授权，可以直接调用 getUserInfo 获取头像昵称
+      //       wx.getUserInfo({
+      //         success: function(res) {
+      //           console.warn(res.userInfo)
+      //         }
+      //       })
+      //     }
+      //   }
+      // })
+      wx.getSetting({
+        success(res) {
+          if (!res.authSetting['scope.userInfo']) {
+            wx.authorize({
+              scope: 'scope.userInfo',
+              success () {
+                // 已经授权，可以直接调用 getUserInfo 获取头像昵称
+                wx.getUserInfo({
+                  success: function(res) {
+                    console.warn(res.userInfo)
+                  }
+                })
+              }
+            })
+          }
+        }
+      })
+    }
   }
 };
 </script>