一、效果展示
二、解題思路：
微信授權(quán)登錄（獲取用戶信息）
1.先獲取用戶信息——用戶授權(quán)允許后，通過(guò)調(diào)用uni.login 可以獲取到code。
2.拿著獲取到的code去調(diào)用——登錄接口，可以獲取到token。
3.把token存入緩存。就可以在頁(yè)面判斷是否登錄了。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-774368.html
三、代碼
第一種方式：
<view @click="getUserInfo()">點(diǎn)擊登錄</view>
<view v-if="info.avatar" @click="outLoginFun">退出登錄</view>
<script>
export default {
data() {
return {
localtoken: ''
}
},
onShow() {
this.localtoken = uni.getStorageSync('localtoken');
},
methods: {
getUserInfo() {
var that = this;
uni.showLoading({ // 展示加載框
title: '加載中',
});
uni.getUserProfile({ //獲取到用戶信息
desc: '登錄后可同步數(shù)據(jù)',
success: async (obj) => {
console.log('obj', obj);
that.nickName = obj.userInfo.nickName //用戶名
that.avatarUrl = obj.userInfo.avatarUrl //用戶頭像
// 調(diào)用 action ，請(qǐng)求登錄接口
uni.login({
provider: 'weixin',
success: (res) => {
console.log('res-login', res); //獲取到code
that.code = res.code;
// console.log('code', res.code);
//請(qǐng)求登錄接口
if (res.errMsg == 'login:ok') {
var params = {
code: that.code,
nickname: that.nickName,
avatar: that.avatarUrl
}
that.$api.appPlateForm('POST', 'auth/login', params, function(res) {
if (res.code == 200) {
//獲取到token 存入緩存。通過(guò)有無(wú)token來(lái)判斷是否登錄
// console.log('登錄接口',res)
uni.setStorageSync('localtoken', res.data.data.access_token)
let pages = getCurrentPages(); //獲取所有頁(yè)面的數(shù)組對(duì)象
let currPage = pages[pages.length - 1]; //當(dāng)前頁(yè)面
currPage.onLoad(currPage.options); // 傳入?yún)?shù)刷新當(dāng)前頁(yè)面
currPage.onShow(); // 傳入?yún)?shù)刷新當(dāng)前頁(yè)面
that.myProfile() //用戶信息接口
uni.showToast({
title: '登錄成功',
icon: 'success',
mask: true,
});
}
}, function(err) {
uni.showToast({
icon: 'none',
title: err.msg
})
});
}
},
});
},
fail: () => {
uni.showToast({
title: '授權(quán)已取消',
icon: 'error',
mask: true,
});
},
complete: () => {
// 隱藏loading
uni.hideLoading();
},
});
},
//退出登錄
logOut() {
var that = this
uni.showModal({
title: '確定要退出登錄嗎？',
success: function(res) {
if (res.confirm) { //確認(rèn)退出
uni.removeStorageSync('localtoken')
uni.removeStorageSync('userId');
uni.removeStorageSync('userInfo');
this.info = {};
//that.nickname = ''
//that.headimgurl = ''
//跳轉(zhuǎn)到首頁(yè)
uni.reLaunch({
url: '/pages/home/index'
})
} else if (res.cancel) { //取消退出
// console.log('用戶點(diǎn)擊取消');
}
}
});
},
}
}
</script>
第二種方式：
<template>
<view class="">
<view @tap="loginFun">登錄</view>
<view @click="outLoginFun">退出登錄</view>
</view>
</template>
<script>
export default {
data() {
return {
info: {},
}
},
methods: {
loginFun() {
uni.login({
"provider": "weixin",
"onlyAuthorize": true, // 微信登錄僅請(qǐng)求授權(quán)認(rèn)證
success: (event) => {
console.log(event);
this.$api.appPlateForm('post', this.$url.url.getOpenId, {
code: event.code
}, (res) => {
console.log(res.data.openid);
let param = {
openid: res.data.openid,
}
this.$api.appPlateForm('post', this.$url.url.login, param, (res) => {
uni.setStorageSync('localtoken', res.data.token);
uni.setStorageSync('user', JSON.stringify(res.data.user));
uni.showToast({
icon: 'success',
title: '登錄成功'
})
})
})
},
fail: (err) => {
// 登錄授權(quán)失敗
// err.code是錯(cuò)誤碼
}
})
},
// 退出登錄
outLoginFun() {
uni.removeStorageSync('localtoken');
uni.removeStorageSync('userId');
uni.removeStorageSync('userInfo');
this.info = {};
uni.reLaunch({
url: '/pages/home/index'
})
},
}
}
</script>
ending~
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-774368.html
到了這里，關(guān)于【微信授權(quán)登錄】uniapp開發(fā)小程序，實(shí)現(xiàn)微信授權(quán)登錄功能 & 退出登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
