Taro开发微信小程序-登录实现(二)

登录过程应该写在src/app.js中，这样才能最先获取用户的登陆状态。
在src/app.js中的componentWillMount中书写代码：

Taro.checkSession({
      success() {
        return Taro.getStorage({key: 'session3rd'})
      },
      fail() {
        return Taro.login()
          .then(response=>{
            return Taro.request({
              url: '后端接口',
              code: response.code
            })
              .then(res=>{
                if(res.statusCode===200){
                  Taro.setStorage({
                    key: 'session3rd',
                    data: res.data.data.session3rd
                  })
                }else if(res.status === 500){
                  Taro.showToast({
                    title: '发生错误，请重试！',
                    icon: 'none'
                  })
                }
              })
          })
          .catch(err=>{
            console.log(err);
            Taro.showToast({
              title: '发生错误，请重试!',
              icon: 'none'
            })
          })
      }
    })

先调用Taro.getStorage，检查登陆是否过期。没有过期的话返回存在storage中的登陆信息，如果过期或者没有数据的话调用Taro.login登陆API。
Taro.login返回的对象中有一个code属性，唯一的表示了当前用户，拿着code向后端请求信息(跟后端商量好接口)，将后端返回的用户数据存储在storage中，即Taro.setStorage，之后可以用Taro.getStorage获取存储在storage中用户的信息。
小程序跟以往的网页开发还是有很大区别的，小程序中登陆是自动实现的，不需要用户的授权，只获取了唯一标识用户的code，获取用户的信息是需要用户授权的，下一节会讲到这个。
登陆代码：

import '@tarojs/async-await'
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
import 'taro-ui/dist/style/index.scss'
import Index from './pages/index'

import configStore from './store'


import './app.less'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

const store = configStore()

class App extends Component {

  config = {
    pages: [
      'pages/index/index',
      'pages/main/index',
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      // navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  componentWillMount(){

    Taro.checkSession({
      success() {
        return Taro.getStorage({key: 'session3rd'})
      },
      fail() {
        return Taro.login()
          .then(response=>{
            return Taro.request({
              url: `后端接口`,
              code: response.code
            })
              .then(res=>{
                if(res.statusCode===200 && res.data.rest===200){
                  Taro.setStorage({
                    key: 'session3rd',
                    data: res.data.data.session3rd
                  })
                }else if(res.status === 500){
                  Taro.showToast({
                    title: '发生错误，请重试！',
                    icon: 'none'
                  })
                }
              })
          })
          .catch(err=>{
            console.log(err);
            Taro.showToast({
              title: '发生错误，请重试!',
              icon: 'none'
            })
          })
      }
    })

  }

  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      
        
      
    )
  }
}

Taro.render(, document.getElementById('app'))

Taro开发微信小程序 配置环境(一)
Taro开发微信小程序-用户授权(三)
Taro开发微信小程序-TabBar实现(四)