uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄狀態(tài)的思路詳解

更新時(shí)間：2019年11月04日 08:21:15 作者：houqq

這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄態(tài)的思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

微信小程序注冊(cè)登錄思路

(這是根據(jù)自身的項(xiàng)目的思路,不一定每個(gè)項(xiàng)目都適用)

1.制作授權(quán)登錄框,引導(dǎo)用戶(hù)點(diǎn)擊按鈕

2.uni.login獲取code

3.把code傳給后端接口,后端返回如下數(shù)據(jù)

openid: "ogtVM5RWdfadfasdfadfadV5s"
status: 1
// 狀態(tài)碼:status==0(該用戶(hù)未注冊(cè),需調(diào)用注冊(cè)接口) status==1(該用戶(hù)已注冊(cè))

4.判斷用戶(hù)是否注冊(cè),并調(diào)用用戶(hù)信息接口

(1)若已注冊(cè)則提示登錄成功,并調(diào)用后臺(tái)給的獲取用戶(hù)信息的接口,并把數(shù)據(jù)保存到vuex

(2)若未注冊(cè)則調(diào)用注冊(cè)接口,注冊(cè)成功之后調(diào)獲取用戶(hù)信息接口,并把數(shù)據(jù)保存到vuex

制作授權(quán)登錄框

我把它寫(xiě)到一個(gè)組件里,在需要調(diào)用的頁(yè)面注冊(cè)該組件

authorization.vue組件

<template>
  <view class="pop">
    <view class="pop-main">
      <i class="iconfont cancel" @click="cancel"></i>
      <view class="pop-title">需要您的授權(quán)</view>
      <view class="pop-text">
        <view>為了提供更好的服務(wù)</view> 
        <view>請(qǐng)?jiān)谏院蟮奶崾究蛑悬c(diǎn)擊允許</view>
      </view>
      <image class="pop-imgsize" src="../static/images/aut.png" mode=""></image>
      <!-- 微信小程序的引導(dǎo)按鈕,可以獲取到用戶(hù)信息 getuserinfo函數(shù)調(diào)用請(qǐng)求下面會(huì)講到-->
      <button type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">我知道了</button>
    </view>
  </view>
</template>

<script>
  import app from '../common/config.js'
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      getuserinfo(res) {
      // 調(diào)用封裝在app的_getuserinfo函數(shù),_getuserinfo函數(shù)執(zhí)行用戶(hù)獲取code,傳code給后臺(tái),調(diào)用注冊(cè)接口
        app._getuserinfo(res)
      },
      cancel() {
        this.$emit('cancelChild',false)
      }
    }
  }
</script>

<style scoped>
.pop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.3);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop-main {
  width: 690upx;
  height: 800upx;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 20upx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  padding: 64upx 0upx 40upx 0upx;
}
/* 刪除按鈕 */
.cancel {
  position: absolute;
  top: 20upx;
  right: 20upx;
  font-size: 20px;
}
.pop-title {
  padding-bottom: 40upx;
  width: 100%;
  border-bottom: 1px solid #BFBFBF;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
}
.pop-imgsize {
  width: 484upx;
  height: 406upx;
}
.pop-text {
  width: 75%;
  text-align: center;
  font-size: 15px;
  margin: 30upx 0upx;
  letter-spacing: 1px;
}
button {
  background-color: #08BF00;
  color: #FFFFFF;
  text-align: center;
  height: 88upx;
  line-height: 88upx;
  font-size: 14px;
  border-radius: 50upx;
  width: 78%;
}
</style>

在個(gè)人中心頁(yè)注冊(cè)該組件

<template>
  <view>
    <view class="info" >
      <image 
        @click="toSettings" 
        class="headimg" 
        :src="userinfo.headimgurl || defaultHeadimg" 
        >
      </image>
      <text v-if="!hasLogin" class="goLogin" @click="gologin">登錄</text>
      <text v-if="hasLogin">{{userinfo.nickname}}</text>
      <text v-if="hasLogin && userinfo.mobile" class="phone">{{userinfo.mobile}}</text>
    </view>
    <authorization v-if="tologin && !hasLogin" @cancelChild="getChild"></authorization>
  </view>
</template>

點(diǎn)擊"我知道了"按鈕,調(diào)用封裝_getuserinfo的請(qǐng)求

新建config.js,在config封裝請(qǐng)求

import store from '@/store'
const app = {
  apiUrl: 'https://aaa.bbbbb.com/', //請(qǐng)求的地址
  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 = {} // 注冊(cè)時(shí),需要把用戶(hù)信息傳給后臺(tái),所以定義一個(gè)對(duì)象存儲(chǔ)獲取到的用戶(hù)信息
    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?code=' + res.code, //把code傳給后臺(tái),后臺(tái)返回openid和status
            success: (res) => {
              console.log(res)
              if (res.data.openid) {
                uni.setStorageSync('openid', res.data.openid)
                userinfoDetails.openid = res.data.openid
                //處理一下屬性名傳遞給后臺(tái)
                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)
              }
              // 當(dāng)status==0時(shí)說(shuō)明用戶(hù)還沒(méi)有注冊(cè)需要注冊(cè)
              if(res.data.status == 0) {
                that.sendInfo(userinfoDetails) // 調(diào)用注冊(cè)接口,并把用戶(hù)信息userinfoDetails傳給后臺(tái)
                console.log('我還沒(méi)有注冊(cè)')
              } else if (res.data.status == 1) {
                uni.showToast({
                  title: '登錄成功',
                  icon: 'success',
                  duration: 2000
                })
                that.getUserData() // 調(diào)用獲取用戶(hù)信息的接口
              } else {
                uni.hideLoading()
                uni.showToast({
                  title: '登錄失敗',
                  duration: 2000,
                  icon:'none'
                })
              }
            }
          })
        }
      })
     }
    });
  },
  // 注冊(cè)接口
  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: '注冊(cè)成功',
            icon: 'success',
            duration: 2000
          })
          that.getUserData() // 調(diào)用獲取用戶(hù)信息的接口
        } else {
          uni.hideLoading()
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          })
        }
      }
    })
  },
  // 獲取用戶(hù)信息
  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存儲(chǔ)登錄態(tài)的方法

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

總結(jié)

以上所述是小編給大家介紹的uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄狀態(tài)的思路詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: