小程序的登录授权简单实现

笔者最近在写一个医院智能诊疗的小程序，用的是wepy框架，类似于vue的写法，(其实就是vue,照着vue往下怼代码就完事了，比原生写起来能方便)，就分享一下登录授权吧！代码绝对全。。。。

功能虽然简单，因为笔者也是刚入行时间不长的菜鸟，懂得也不多，但是最近也就是因为公司的活也不多，也就静下心来写一些博客，记录自己一步步成长吧。。。

第一步：肯定是要写结构了吧，哈哈，这个就不多说了，不多说直接上代码，结构和样式直接到位。。。

  <template>
  <view class="container">
    <view class="titleView">
      <image class="icon" src="../../assets/icons/logo.png" />
      <text class="title">乙肝智能诊疗系统</text>
    </view>
    <view class="contentView">
      <text class="tip_title">登录成功后将获得以下权限</text>
      <text class="tip_content"> · 获得你的公开信息(昵称、头像等)</text>
      <button
        class="confirmBtn"
        open-type="getUserInfo"
        type="primary"
        bindgetuserinfo="bindGetUserInfo"
      >
        确认登录
      </button>
    </view>
  </view>
</template>

​

<style lang="less">
page {
  background: white;
  padding: 0 50rpx;
}
.titleView {
  width: 650rpx;
  height: 370rpx;
  border-bottom: 1rpx solid #e9e9e9;
}
.icon {
  width: 150rpx;
  height: 150rpx;
  margin-left: 250rpx;
  margin-top: 100rpx;
  border-radius: 20rpx;
  border: 1rpx #e9e9e9 solid;
}
.title {
  display: inline-block;
  margin-top: 10rpx;
  width: 650rpx;
  text-align: center;
}
.contentView {
  width: 650rpx;
}
.tip_title {
  display: inline-block;
  margin-top: 50rpx;
  width: 650rpx;
  font-size: 34rpx;
}
.tip_content {
  display: inline-block;
  width: 650rpx;
  font-size: 30rpx;
  color: #939393;
  margin-top: 20rpx;
}
.confirmBtn {
  margin-top: 80rpx;
  width: 630rpx;
  margin-right: 10rpx;
}
</style>

效果图就是这样。。。。。

最后就是js代码

wepy… 首先你得先导入wepy吧…

首先就是获取code，调用wx.login的方法获得code。。这里发送请求因为使用了promise，就是为了简化异步操作，async 和await 整起来，，，，

因为后台还要获取用户的昵称，头像和性别，就顺便一次就发给后台了

wepy这个框架恶心人的地方就是一旦有异步赋值就得用this.apply(),不然赋不上值。。也可以吧微信自带的api换成wepy, 例如：wx.login 改成wepy.login（）.听说是改了之后兼容性能好一点，

拿到code的值之后就是掉后台接口发送数据，换取token(但是我们不叫token,叫什么sessionId，反正都是一个意思)拿到之后保存到本地，，因为每次发请求都要通过拦截器放在请求头里，这是凭证对吧，这个就像你买东西就得有钱，，，，哈哈哈，，，

<script>
import wepy from 'wepy'
export default class extends wepy.page {
  data = {
    code: '',
    userInfoss: {},
  }
  methods = {
    // 点击确认登录
    async bindGetUserInfo(e) {
      console.log(e.detail.userInfo)
      this.userInfoss = e.detail.userInfo
      if (e.detail.userInfo != null) {
        console.log(e.detail.userInfo)
        wx.setStorageSync('user', e.detail.userInfo)
      }
      this.$apply()
      this.getUserInfo()
    },
  }
  onLoad() {}
  async getUserInfo() {
    // 获取code
    const res = await wepy.login()
    this.code = res.code
    console.log(this.code, '11')
    const { data: result } = await wepy.get('applet/appletLogin', {
      code: this.code,
      nickName: this.userInfoss.nickName,
      sex: this.userInfoss.gender,
      headImage: this.userInfoss.avatarUrl,
    })
    if (result.code != 200) {
      return wepy.noToast(res.msg)
    }
    console.log(result, '1234567890')
    wepy.setStorageSync('sessionId', result.data)
    this.$apply()
    wepy.navigateTo({
      url: '../../pages/home',
    })
  }
}
</script>

拦截器代码，wepy官网有拦截器的说明。。。我也是照搬过来的，，造轮子又不犯罪 对吧，，，，

constructor() {
    super()
    this.use('requestfix')
    this.use('promisify')
    // 拦截request请求
    this.intercept('request', {
      // 发出请求时的回调函数
      config(p) {
        // 加载loading样式
        wepy.showLoading({
          title: '数据加载中....',
        })
        // // 通过拦截器为header请求头添加Authorization字段
        p.header = {
          sessionId: wepy.getStorageSync('sessionId'),
          'content-type': 'application/x-www-form-urlencoded',
        }
        // console.log(p)
        // 必须返回OBJECT参数对象，否则无法发送请求到服务端
        return p
      },

      // 请求成功后的回调函数
      success(p) {
        wepy.hideLoading()
        // 必须返回响应数据对象，否则后续无法对响应数据进行处理
        return p
      },

      // 请求失败后的回调函数
      fail(p) {
        wepy.hideLoading()
        // 必须返回响应数据对象，否则后续无法对响应数据进行处理
        return p
      },

      // 请求完成时的回调函数(请求成功或失败都会被执行)
      complete(p) {
        // 关闭loading样式 隐藏loading提示框
        wepy.hideLoading()
      },
    })
  }