uni-app微信登錄獲取用戶頭像，用戶信息和手機號，存token

login.vue

 

<template>
    <view class="personal_page">
        <navBar :title="topInfo.title" :url="topInfo.url" :type="topInfo.type" :icon_title="topInfo.icon_title">
        </navBar>
        <!-- <text>獲得你的公開信息(昵稱，頭像等)</text> -->
        <!-- 是否登錄 -->
        <uni-popup ref="popup">
            <view class="login_box">
                <view class="title">為了您更好的用戶體驗，請授權登錄</view>
                <view class="operate">
                    <button @click="closeProp">取消</button>
                    <button class="login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登錄</button>
                </view>
            </view>
        </uni-popup>

    </view>
</template>

<script> import navBar from "@/components/navBar/navBar.vue" export default { components: { navBar }, data() { return { topInfo: { url: "", title: "授權登錄", icon_title: "", type: 'tab' }, wxCode: "", sessionKey: {}, isHide: true } }, onLoad(option) {}, onShow() { let token = uni.setStorageSync("token"); console.log('token', token); if (!token) { this.wxLogin(); } }, methods: { /* 是否登錄 */ wxLogin() { let _this = this; uni.login({ provider: "weixin", success: (res) => { console.log("res", res) if (res.errMsg.indexOf("ok") != -1) { this.wxCode = res.code; // _this.getOpenid();
 uni.showModal({ title: '溫馨提示', content: '親，授權微信登錄后才能正常使用小程序功能', success(res) { console.log(0) console.log(res) //如果用戶點擊了確定按鈕
                                    if (res.confirm) { uni.getUserProfile({ desc: '獲取你的昵稱、頭像、地區及性別', success: (res) => { console.log("獲取昵稱", res); let _res = _this.$myRequset({ url: "/api", method: "POST", data: { operate: "user.WxDecode", code: _this.wxCode, encryptedData: res .encryptedData, iv: res.iv, signature: res.signature, rawData: res.rawData }, }).then((res) => { console.log("解碼", res); _this.sessionKey = res.data .data; _this.isLogin(); _this.getPhoneNumber(); }); }, fail: res => { //拒絕授權
 uni.showToast({ title: '您拒絕了請求,不能正常使用小程序', icon: 'error', duration: 2000 }); return; } }); } else if (res.cancel) { //如果用戶點擊了取消按鈕
                                        console.log(3); uni.showToast({ title: '您拒絕了請求,不能正常使用小程序', icon: 'error', duration: 2000 }); uni.switchTab({ url:"../index/index" }); return; } } }); } else { uni.showToast({ title: "獲取code失敗", duration: 2000, icon: "none" }) } }, fail: (res) => { uni.showToast({ title: "登錄失敗", duration: 2000, icon: "none" }) _this.back(); } }) }, isLogin() { this.$refs.popup.open(); }, closeProp() { this.$refs.popup.close(); this.isLogin(); }, /* 用戶授權手機號 */
            async getPhoneNumber(e) { let _this = this; try{ let _msg = e.detail.errMsg; if (_msg == "getPhoneNumber:ok") { // 獲取手機號
                    this.$refs.popup.close(); let res = await this.$myRequset({ url: "/api", method: "POST", data: { operate: "user.get_Phone", encryptedData: e.detail.encryptedData, iv: e.detail.iv, sessionKey: this.sessionKey.session_key, openid: this.sessionKey.openid }, }); console.log('獲取手機號', res); if (res.data.code == 1) { let token = await this.$myRequset({ url: "/api/user/mobilelogin", method: "POST", data: { mobile: res.data.data.phoneNumber, captcha: 123 }, }); console.log('token', token) uni.setStorageSync("token", token.data.data.userinfo.token); uni.switchTab({ url:"../index/index" }); } } else { this.isLogin(); // 重新要求授權
 } }catch{} }, } } </script>

<style> @import url("login.css"); </style>

 

main.js

Vue.prototype.checkLogin = function(){ const token = uni.getStorageSync('token') if(token === ''){ // 本地沒有token表示未登錄
        console.log('未登錄返回到登錄頁') uni.reLaunch({url:'/pages/login/login'}) return false } return token; }

 

使用token

personal.vue

onShow() { let loginRes = this.checkLogin(); console.log('loginRes', ) if (!loginRes) { return false; } else { this.token = uni.getStorageSync("token"); this.getUserInfo(); } },

 

此流程為進去指定頁面時需要用戶登錄，則判斷是否登錄，沒有登錄時跳轉至login頁面授權登錄后先自動跳轉首頁。用戶體驗有些許欠缺，若有同行大神有其他更好的實現方式敬請告知，一起探討哦。。。。。。。。。。。。。