2021-02-02

uniapp 微信小程序全局登录鉴权

App.vue

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')

            this.handleLogin();
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        methods: {
            // 开始登录鉴权
            handleLogin(e) {
                const self = e || this;

                // 获取登录凭证
                return uni.login({
                    provider: 'weixin',
                    success: function(res) {
                        if (!res.hasOwnProperty('code')) {
                            return uni.showToast({
                                title: '获取登录态失败',
                                icon: 'none',
                            });
                        }

                        // 调用业务登录接口
                        // return uni.request({
                        //     url: 'login',
                        //     data: {
                        //         code: res.code,
                        //     },
                        // });

                        // 测试模拟
                        setTimeout(() => {
                            uni.setStorageSync('token', 'hongfs');
                        }, 2000);
                    },
                });
            },
        },
    }
</script>

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 记录调用次数
var $init_count = 0;

Vue.prototype.$init = function(cb) {
    $init_count++;

    // 一直没有 token 可能是服务器有点问题需要重新执行获取
    if ($init_count && $init_count % 100 === 0) {
        getApp().handleLogin(this);
    }

    // 50 毫秒执行一次判断，时间看自己业务
    setTimeout(() => {
        // 没有 token 就继续调用
        if (!uni.getStorageSync('token')) {
            return Vue.prototype.$init(cb);
        }

        // 存在 token
        // 先清除次数统计
        $init_count = 0;

        if (cb) {
            // 回调存在就调用回调
            cb();
        } else {
            // 不存在回调如果当前页面存在 handleInit 那就调用
            const pages = getCurrentPages();
            const page = pages[pages.length - 1];

            page.$vm.handleInit && page.$vm.handleInit();
        }
    }, 50);
}

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

pages\index\index.vue

<template>
    <view class="container">
        测试鉴权
    </view>
</template>

<script>
    export default {
        onLoad() {
            this.handleGetTime();

            // 调用一，成功后调用 handleInit
            this.$init();

            // 调用二，成功后执行回调里面内容
            // this.$init(() => {
            //     this.handleInit();
            // });
        },
        methods: {
            handleInit () {
                console.log('鉴权完成，开始调用业务接口');
                this.handleGetTime();
            },
            handleGetTime () {
                console.log((new Date()).getTime());
            },
        }
    }
</script>

运行控制台结果

App Launch
App Show
1611558116875
鉴权完成，开始调用业务接口
1611558119488

uniapp 微信小程序全局登录鉴权

分类