Solution to authorized login of mini program (with code)

The content of this article is about the solution to the authorized login of the mini program (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I have recently been working on a small program project, which is still a shopping mall, and I have started to study the login authorization pit of WeChat. It is the first time I came into contact with a small program, and the authorization login is also a mess. I will slowly improve it later

Scenario

WeChat users can enter the mini program through search
They can also enter the mini program through sharing with others
After entering the mini program, user authorization is required to obtain user information for registration

Code implementation

Initialization page home page Users entering the mini program for the first time must authorize background registration and log in
app.json

{
"pages": [
    "pages/home/index", 
    "pages/login/index",
     ...
   ]
}

login. js logic enters the page to determine whether it has been authorized, and determines whether the user has been authorized. If authorized, the login will be displayed, if there is no authorization, the authorization will be displayed. Whether the user is registering or logging in, he or she uses the same interface provided by the background. The returned token is stored locally
login.js

const App = getApp()
import { loginModel } from '../../models/login.js'
import { MineModel } from '../../models/mine.js'
import { encodeUnicode } from '../../utils/index.js'
const ModelLogin = new loginModel()
const Modelmine = new MineModel()
Page({
  data: {
    logged: !1,
    isauth: false,
    locked: false
  },
  onLoad: function(options) {
    // 返回到之前要刷新
    var pages = getCurrentPages() // 获取页面栈
    var prevPage = pages[pages.length - 2] // 前一个页面
    prevPage.setData({
      isBack: true
    })
  },
  onShow: function() {
    // 如果已经授权则显示登录,直接登录不调用授权
    App.WxService.getSetting().then(res => {
      if (res.authSetting['scope.userInfo']) {
        this.setData({
          isauth: true
        })
      }
    })
    //token 不能在page外面定义，变量写在 page 外面有缓存
    const token = App.WxService.getStorageSync('utoken')
    // 如果有token显示已经授权
    this.setData({
      logged: !!token
    })
    token && setTimeout(this.goBack, 1500)
  },
  login() {
    this.wechatSignUp()
  },
  goBack() {
    // 返回登录之前的页面
    wx.navigateBack({
      delta: 1
    })
  },
  // 登陆注册
  wechatSignUp(cd) {
    // 上锁如果正在请求接口那么就返回
    if (this.data.locked) {
      return
    }
    this.data.locked = true
    //注册或者登陆获取token
    let code = ''
    App.WxService
      .login()
      .then(data => {
        code = data.code
        wx.setStorageSync('logincode', data.code)
        return App.WxService.getUserInfo()
      })
      .then(data => {
        // 请求后台登录注册接口
        return ModelLogin.wechatSignUp({
          encrypteData: data.encryptedData,
          iv: data.iv,
          rawData: encodeUnicode(data.rawData), // 编码
          signature: data.signature,
          code: code
        })
      })
      .then(data => {
        this.data.locked = false
        if (data.data.token == '') {
          wx.showToast({
            title: '登录失败',
            icon: 'none'
          })
          return
        }
        App.WxService.setStorageSync('utoken', data.data.token)
        // 访问后台接口获取用户信息
        ModelLogin.getVipInfo({ token: data.data.token }).then(res => {
          App.globalData.userInfo = res.data.userInfo
          // 返回上一页
          this.goBack()
        })
      })
      .catch(err => {
        this.data.locked = false
        console.log(err)
      })
  }
})

App.WxService here is equivalent to wx because wx is a callback method, and promise is used here.
First determine whether there is authorization. If there is no authorization, click Authorize. If there is authorization, click Login. The calling methods are all wechatSignUp. Get the code of wx.login and the data of wx.getUserInfo to the background, and then the background returns the token, and then Then access the backend to obtain user information
The logic of login is probably these
login.wxml

<view class="login-container">
  <view class="login" wx:if="{{ !logged }}">
    <view class="app-info">
      <image class="app-logo" src="./s-toplogo@2x.png" />
      <text class="app-name">商城</text>
    </view>
    <view class="alert">
      <view class="alert-title" wx:if="{{!isauth}}">请同意授权</view>
      <view class="alert-title" wx:if="{{isauth}}">请登录</view>
      <view class="alert-desc">
        <view class="alert-text">为了让头号买手可以更好的为您服务</view>
      </view>
    </view>
    <button type=&#39;primary&#39; wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">确认授权</button>
    <button type="primary" wx:if="{{isauth}}" class="weui-btn" bindtap="login">确认登录</button>
  </view>
  <view class="logged" wx:else>
    <image class="logged-icon" src="./s-toplogo@2x.png" />
    <view class="logged-text">近期你已经授权登陆过商城</view>
    <view class="logged-text">自动登录中</view>
  </view>
</view>

When accessing the backend interface, pass the token in the header. If the backend does not get the token, it will return 401. The front end Unified interception and jump to the login page

End

About app.js was originally intended to be intercepted in the app, but asynchronous requests are always obtained after entering the page The data returned by the background is because the user may enter the mini program from other pages such as the product details page and return to the entry page after authorization. If intercepted in app.js, the page cannot be returned, so the user can directly judge it in the js of the page. Well, there aren’t many pages to share, so I didn’t write anything in app.js. This is my first contact, I hope I can optimize it in the future and then post it to record it

The above is the detailed content of Solution to authorized login of mini program (with code). For more information, please follow other related articles on the PHP Chinese website!