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页面授权登录后先自动跳转首页。用户体验有些许欠缺，若有同行大神有其他更好的实现方式敬请告知，一起探讨哦。。。。。。。。。。。。。