Taro-授权登录

冷不防 2021-08-30 18:59 1070阅读 0赞

### 授权登录 ###

首先小程序在获取用户信息前应先检查微信是否授权登录，这里需要先获取用户的当前设置——`Taro.getSetting`

// 使用方法一
    import Taro from '@tarojs/taro'
    
    Taro.getSetting({ 
        success (res) { }
    })
    
    // 或者
    Taro.getSetting().then(res => { })
    
    // 使用方法二
    import Taro, {  getSetting } from '@tarojs/taro'
    // 同上，去掉前面的Taro

调用此方法后判断用户是否授权：

import {  hideTabBar } from '@tarojs/taro'
    getSetting().then(res => { 
        let authSetting = res.authSetting
        // 如果没有授权则跳转至授权页面或者唤起授权弹框
        if (!authSetting['scope.userInfo']) { 
          // 这里要唤起自定义的授权弹框，因为现在微信上只能通过按钮来触发授权，如果是在 tabBar 的页面，需要先隐藏掉 tabBar
            hideTabBar()
            // 然后唤起弹框
            this.setState({ 
                authShow: true
            })
        }
    })

那我们先自定义一个授权弹框在首页：

getUserInfo = () => { 
        // ...
    }
    
    <AtModal isOpened>
      <AtModalHeader>授权登录</AtModalHeader>
      <AtModalContent>
        您还尚未授权，请授权后登录
      </AtModalContent>
      <AtModalAction>
        <Button onClick={ this.handleCancel}>取消</Button>
        <Button
    	  open-type="getUserInfo"
    	  onGetUserInfo={ this.getUserInfo}
     	>确定</Button>
      </AtModalAction>
    </AtModal>

然后如果没有授权就显示这个弹框，然后点击确定就可以授权了。授权后就可以进行下一步操作，比如用户账号绑定，手机号码绑定等等。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/b41c2b79990242238c1af19233e04d3f.png