uni-app微信小程序登錄并使用vuex存儲登錄狀態的思路詳解

微信小程序注冊登錄思路

(這是根據自身的項目的思路,不一定每個項目都適用)

1.制作授權登錄框,引導用戶點擊按鈕

2.uni.login獲取code

3.把code傳給后端接口,后端返回如下數據

openid: "ogtVM5RWdfadfasdfadfadV5s"
status: 1
// 狀態碼:status==0(該用戶未注冊,需調用注冊接口) status==1(該用戶已注冊)

4.判斷用戶是否注冊,并調用用戶信息接口

(1)若已注冊則提示登錄成功,并調用后臺給的獲取用戶信息的接口,并把數據保存到vuex

(2)若未注冊則調用注冊接口,注冊成功之后調獲取用戶信息接口,并把數據保存到vuex

制作授權登錄框

我把它寫到一個組件里,在需要調用的頁面注冊該組件

authorization.vue組件

在個人中心頁注冊該組件

?

點擊"我知道了"按鈕,調用封裝_getuserinfo的請求

新建config.js,在config封裝請求

import store from '@/store'
const app = {
  apiUrl: 'https://aaa.bbbbb.com/', //請求的地址
  openidRequest(obj) {
    try {
      const openid = uni.getStorageSync('openid');
      if (openid) {
        if(obj.data) {
          obj.data["openid"] = openid;
        } else {
          obj.data = {"openid": openid};
        }
        obj.url = this.apiUrl + obj.url;
        uni.request(obj)
      } else {
        console.log("獲取不到openid")
      }
    } catch (e) {
      console.log(e)
      console.log("獲取不到openid")
    }
  },
  _getuserinfo(res) {
    var that = this
    var userinfoDetails = {} // 注冊時,需要把用戶信息傳給后臺,所以定義一個對象存儲獲取到的用戶信息
    userinfoDetails = res.detail.userInfo 
    uni.getUserInfo({
     provider: 'weixin',
     success: function () {
      uni.login({
        success:function(res){
          uni.showLoading({
            title: '登陸中...',
            mask: false
          });
          uni.request({
            url: that.apiUrl + 'sdafl/ddfax/dfadf&＃63;code=' + res.code, //把code傳給后臺,后臺返回openid和status
            success: (res) => {
              console.log(res)
              if (res.data.openid) {
                uni.setStorageSync('openid', res.data.openid)
                userinfoDetails.openid = res.data.openid
                //處理一下屬性名傳遞給后臺
                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/avatarUrl/g, "headimgurl"));
                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/gender/g, "sex"));
                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/nickName/g, "nickname"));
                delete userinfoDetails.language;
                userinfoDetails.ppid = store.state.ppid || ''
                console.log(userinfoDetails)
              }
              // 當status==0時說明用戶還沒有注冊需要注冊
              if(res.data.status == 0) {
                that.sendInfo(userinfoDetails) // 調用注冊接口,并把用戶信息userinfoDetails傳給后臺
                console.log('我還沒有注冊')
              } else if (res.data.status == 1) {
                uni.showToast({
                  title: '登錄成功',
                  icon: 'success',
                  duration: 2000
                })
                that.getUserData() // 調用獲取用戶信息的接口
              } else {
                uni.hideLoading()
                uni.showToast({
                  title: '登錄失敗',
                  duration: 2000,
                  icon:'none'
                })
              }
            }
          })
        }
      })
     }
    });
  },
  // 注冊接口
  sendInfo(userinfoDetails) {
    var that = this
    uni.request({
      url: this.apiUrl + 'fdafd/ifdaffdex/fdaff',
      data: userinfoDetails,
      method: 'POST',
      success: (res) => {
        if(res.data.userinfo == 1) {
          uni.hideLoading()
          uni.showToast({
            title: '注冊成功',
            icon: 'success',
            duration: 2000
          })
          that.getUserData() // 調用獲取用戶信息的接口
        } else {
          uni.hideLoading()
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          })
        }
      }
    })
  },
  // 獲取用戶信息
  getUserData() {
    uni.request({
      url: this.apiUrl + 'sfad/dfadfad/idfadffde', 
      data: {
        openid: uni.getStorageSync('openid')
      },
      method: 'POST',
      success: (res) => {
        if(res.data.status == 1) {
          console.log(res.data)
          store.commit('login', res.data.user) // vuex的方法
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          })
        }
      }
    })
  }
}
export default app;

vuex存儲登錄態的方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    hasLogin: false,
    userinfo: {},
    ppid: '',
  },
  mutations: {
    // 登錄
    login(state,res) {
      state.hasLogin = true
      state.userinfo = res
      uni.setStorage({
        key: 'userinfo',
        data: res
      })
      // console.log(state.userinfo)
      // console.log(state.hasLogin)
    },
    // 二維碼ppid
    saveppid(state,ppid) {
      state.ppid = ppid
      uni.setStorage({
        key: 'ppid',
        data: ppid
      })
      // console.log(state.ppid)
    },
  },
})

export default store

?

總結

以上所述是小編給大家介紹的uni-app微信小程序登錄并使用vuex存儲登錄狀態的思路詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。愛掏網 - it200.com在此也非常感謝大家對網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！