uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄狀態(tài)的思路詳解
更新時(shí)間：2019年11月04日 08:21:15 作者：houqq
這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄態(tài)的思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
微信小程序注冊登錄思路
(這是根據(jù)自身的項(xiàng)目的思路,不一定每個(gè)項(xiàng)目都適用)
1.制作授權(quán)登錄框,引導(dǎo)用戶點(diǎn)擊按鈕
2.uni.login獲取code
3.把code傳給后端接口,后端返回如下數(shù)據(jù)
openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 狀態(tài)碼:status==0(該用戶未注冊,需調(diào)用注冊接口) status==1(該用戶已注冊)
4.判斷用戶是否注冊,并調(diào)用用戶信息接口
(1)若已注冊則提示登錄成功,并調(diào)用后臺(tái)給的獲取用戶信息的接口,并把數(shù)據(jù)保存到vuex
(2)若未注冊則調(diào)用注冊接口,注冊成功之后調(diào)獲取用戶信息接口,并把數(shù)據(jù)保存到vuex
制作授權(quán)登錄框
我把它寫到一個(gè)組件里,在需要調(diào)用的頁面注冊該組件
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)按鈕,可以獲取到用戶信息 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í)行用戶獲取code,傳code給后臺(tái),調(diào)用注冊接口
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è)人中心頁注冊該組件
<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 = {} // 注冊時(shí),需要把用戶信息傳給后臺(tái),所以定義一個(gè)對(duì)象存儲(chǔ)獲取到的用戶信息
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í)說明用戶還沒有注冊需要注冊
if(res.data.status == 0) {
that.sendInfo(userinfoDetails) // 調(diào)用注冊接口,并把用戶信息userinfoDetails傳給后臺(tái)
console.log('我還沒有注冊')
} else if (res.data.status == 1) {
uni.showToast({
title: '登錄成功',
icon: 'success',
duration: 2000
})
that.getUserData() // 調(diào)用獲取用戶信息的接口
} 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() // 調(diào)用獲取用戶信息的接口
} 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存儲(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
將HTML的左右尖括號(hào)等轉(zhuǎn)義成實(shí)體形式的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了將HTML的左右尖括號(hào)等轉(zhuǎn)義成實(shí)體形式的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2014-05-05
antd?table長表格出現(xiàn)滾動(dòng)條的操作方法
這篇文章主要介紹了antd?table長表格如何出現(xiàn)滾動(dòng)條,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Javascript圖像處理—圖像形態(tài)學(xué)(膨脹與腐蝕)
上一篇文章，我們講解了圖像處理中的閾值函數(shù),這一篇文章我們來做膨脹和腐蝕函數(shù)2013-01-01
這篇文章主要介紹了JS簡單實(shí)現(xiàn)獲取元素的封裝操作,結(jié)合實(shí)例形式分析了JS針對(duì)頁面ID、class、TAG元素獲取的函數(shù)與對(duì)象封裝操作實(shí)現(xiàn)方法,需要的朋友可以參考下2017-04-04
基于javascript實(shí)現(xiàn)九宮格大轉(zhuǎn)盤效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)九宮格大轉(zhuǎn)盤效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
threejs使用JSON格式保存和加載整個(gè)場景分析
本文介紹了如何使用Three.js將三維場景保存為JSON格式,并加載整個(gè)場景,通過調(diào)用各個(gè)對(duì)象的.toJSON()方法,可以保存和加載立方體、球體、obj、glb等三維模型的頂點(diǎn)和材質(zhì)數(shù)據(jù),文章詳細(xì)講解了實(shí)現(xiàn)思路和代碼樣例,一起看看吧2024-11-11
這篇文章主要為大家詳細(xì)介紹了js鼠標(biāo)點(diǎn)擊圖片切換效果，很實(shí)用的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
Ajax異步文件上傳與NodeJS express服務(wù)端處理
本文主要介紹了Ajax異步文件上傳與NodeJS express服務(wù)端處理的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript異步編程Promise模式的6個(gè)特性
Promise說起來是一個(gè)非常簡單的概念，即使你沒有機(jī)會(huì)去使用它，很有可能你也了解過它。Promise是一個(gè)非常有價(jià)值的構(gòu)造器，能夠幫助你避免使用鑲套匿名方法，而使用更具有可讀性的方式組裝異步代碼。這里我們將介紹6個(gè)最簡單的特性，希望對(duì)大家有幫助2014-04-04