Taro开发微信小程序-用户授权(三)

我们已经完成了用户的登录,现在我们来完成用户的授权页面。

我们要先在src/app.js中,查看用户授权了没有,如果用户授权的话不需要再次确认授权。
写在componentWillMount生命周期中:

Taro.getSetting()
      .then(res=>{
        if(res.authSetting["scope.userInfo"]){
          return true;
        }else {
          throw new Error('没有授权')
        }
      })
      .then(res=>{
        return Taro.getUserInfo();
      })
      .then(res=>{
        Taro.setStorage({
          key: 'userInfo',
          data: res.userInfo
        })
      })
      .catch(err=>{
        console.log(err)
      })

用户授权的话,把用户的详细信息保存在Storage中的userInfo中 。
我们可以写一个主页,src/pages/index/index.js,如果用户没有授权,页面出一个按钮点击后询问授权,如果用户已经授权的话直接跳转。

componentDidMount(){
    try {
      const value = Taro.getStorageSync('userInfo')
      if (value) {
        Taro.redirectTo({
          url: '/pages/main/index'
        })
      }
    } catch (e) {
      // Do something when catch error
    }    
}

tobegin = () => {
    Taro.redirectTo({
      url: '/pages/main/index'
    })
  };

获取用户授权比较特殊,微信已经将其封装,只可以通过如下获取授权:


微信提供的回调是bindgetuserinfo,但是Taro将bind事件都封装成了on事件,这个需要注意一下。
src/pages/index/index完整代码:

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

import './index.less'


class Index extends Component {

    config = {
    navigationBarTitleText: '首页'
  }

  tobegin = () => {
    Taro.redirectTo({
      url: '/pages/main/index'
    })
  };

  componentDidMount(){
    try {
      const value = Taro.getStorageSync('userInfo')
      if (value) {
        Taro.redirectTo({
          url: '/pages/main/index'
        })
      }
    } catch (e) {
      // Do something when catch error
    }
    
  }

  render () {
    return (
      
        
      
    )
  }
}

export default Index

Taro开发微信小程序 配置环境(一)
Taro开发微信小程序-登录实现(二)
Taro开发微信小程序-TabBar实现(四)

你可能感兴趣的:(Taro开发微信小程序-用户授权(三))