de-net-official/components/buttonLogin.vue

<template>
    <!-- 外层样式添加 position:relative 样式 -->
    <div class="btnLogin" @click="login"></div>
</template>

<script>
import { getStorage, setStorage, removeStorage, storageKey, getOauthUrl, jumpUrl, OSDetect } from '../utils/help';
import { postRequest } from '../http';

export default {
    name: 'buttonLogin',
    computed: {
        userInfo() {
            return getStorage(storageKey.userInfo);
        }
    },
    data() {
        return {
            timer: null,
        }
    },
    unmounted() {
        clearInterval(this.timer);
    },
    methods: {
        login() {
            if (!!this.userInfo) {
                // 已登录
                this.$emit('success', this.userInfo)
            } else {
                // 未登录
                this.twitterAuth()
            }
        },
        async twitterAuth() {
            let win
            if (OSDetect() === 'ios') {
                win = window.open();
                win.opener = null;
            }

            postRequest(`/denet/user/twitterRequestToken`, {
                params: {
                    oauthCallback: `${jumpUrl}authlogin`,
                },
            }).then(({ code, data }) => {
                if (code == 0) {
                    if (OSDetect() === 'ios') {
                        win.location.href = getOauthUrl(data.authToken);
                    } else {
                        win = window.open(getOauthUrl(data.authToken));
                    }

                    // timer
                    this.timer = setInterval(() => {
                        if (win && win.closed) {
                            clearInterval(this.timer);
                            this.twitterLogin(data);
                        }
                    }, 500);
                } else {
                    this.$emit('error')
                }
            })
        },
        twitterLogin(authData) {
            let verifier = getStorage(storageKey.verifier);
            if (verifier) {
                postRequest(`/denet/user/twitterLogin`, {
                    params: {
                        consumerKey: authData.consumerKey,
                        oauthToken: authData.authToken,
                        oauthVerifier: verifier,
                    },
                }).then(({ code, data }) => {
                    if (code == 0) {
                        setStorage(storageKey.userInfo, data);
                        removeStorage(storageKey.verifier);
                        this.$emit('success', data)
                    } else {
                        this.$emit('error')
                    }
                });
            } else {
                this.$emit('error')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.btnLogin {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>