美文网首页
小程序登录流程

小程序登录流程

作者: 古城老巷_li | 来源:发表于2019-04-25 18:07 被阅读0次

    小程序的登录流程

    参考了网上大牛的登录流程总结出来的代码

    https://juejin.im/post/5ae956366fb9a07aaa111037

    自己整理的如下

    const http = ({
        url = '',
        params = {},
        method
    } = {}) => {
        wx.showLoading({
            title: '加载中...'
        })
        return new Promise((resolve, reject) => {
            wx.request({
                url: url,
                data: params,
                method: method,
                header: getHeader(),
                complete: (res) => {
                    wx.hideLoading();
                    if (res.statusCode >= 200 && res.statusCode < 300) {
                        if (res.data.status < 0) {
                            //-1未登录
                            //-2过期
                            // 重新登录 并且重新请求
                            login().then(res => {
                                http({
                                    url,
                                    params,
                                    method
                                }).then(res => {
                                    resolve(res)
                                })
                            }).catch(() => {
                                //这里记录跳转登录之前的页面路径
                                wx.setStorage({
                                    key: 'pageUrl',
                                    data: {
                                        pageUrl: getCurrentPageUrl(),
                                        toPageUrl: getCurrentPageUrlWithArgs()
                                    }
                                })
                                //去登录
                                wx.redirectTo({
                                    url: '/pages/login/login',
                                })
                            })
                        } else {
                            //成功
                            resolve(res.data);
                        }
    
                    } else {
                        //跳转无网络页面
                        wx.navigateTo({
                            url: '../nofound/nofound'
                        })
                    }
                }
            })
        })
    }
    
    function login() {
      return new Promise((resolve, reject) => {
        // 先调用 wx.login 获取到 code
        wx.login({
          success: res => {
            // 再调用 wx.getUserInfo 获取到用户的一些信息 (一些基本信息,以及生成UnionID 所用到的信息 比如 rawData, signature, encryptedData, iv)
            // 登录操作
            let param = {
              code: res.code
            }
            http({
              url: 'url/auth_mini',
              params: param,
              method: 'post'
            }).then(res => {
              // 该为我们后端的逻辑 若res.item.access_token为登录成功,其他情况皆为异常 (视自身情况而定)
              if (res.item.access_token) {
                // 保存用户信息
                wx.setStorage({
                  key: 'userinfo',
                  data: res.item.user_info
                })
                wx.setStorage({
                  key: "AccessToken",
                  data: res.item.access_token,
                  success: () => {
                    resolve(res)
                  }
                })
              } else {
                reject(res)
              }
            }).catch(err => {
              reject(res)
            })
          }
        })
      })
    }
    //获取token
    const getHeader = () => {
      try {
          var token = wx.getStorageSync('AccessToken');
        if (token) {
          return {
              'AccessToken': token
          }
        }
        return {}
      } catch (e) {
        return {}
      }
    }
    //获取页面路径
    export function getCurrentPageUrl() {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const url = `/${currentPage.route}`
      return url
    }
    //获取页面路径与参数
    export function getCurrentPageUrlWithArgs() {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const url = currentPage.route
      const options = currentPage.options
      let urlWithArgs = `/${url}?`
      for (let key in options) {
        const value = options[key]
        urlWithArgs += `${key}=${value}&`
      }
      urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
      return urlWithArgs
    }
    
    
    
    module.exports = {
      baseUrl,
      apiList,
      myUploadFile,
      get(url, params = {}) {
        return http({
          url,
          params
        })
      },
      post(url, params = {}) {
        return http({
          url,
          params,
          method: 'post'
        })
      },
      put(url, params = {}) {
        return http({
          url,
          params,
          method: 'put'
        })
      },
      // 这里不能使用 delete, delete为关键字段
      myDelete(url, params = {}) {
        return http({
          url,
          params,
          method: 'delete'
        })
      }
    }
    
    该文件为api.js
    

    调用:

    //先引用api.js
    const api = require('../../utils/api.js');
    //参数
    let params = {}
    api.get(params,'url').then(res =>{})
    api.post(params,'url').then(res =>{})
    

    相关文章

      网友评论

          本文标题:小程序登录流程

          本文链接:https://www.haomeiwen.com/subject/zgttnqtx.html