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