qasimBlog/resources/views/common/header.blade.php

<?php
$uri = \Illuminate\Support\Facades\Route::getCurrentRoute()->uri();
?>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
            <div style="display: inline">
                <img src="/static/logo.png" class="logo">
                <p class="logo-title noselect">助友办公软件</p>
            </div>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mb-2 mb-lg-0">
                    <li class="nav-item {{ in_array($uri,['/','']) ? 'active' : '' }}">
                        <a class="nav-link" aria-current="page" href="{{ toRoute('') }}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ toRoute('buy') }}">帮助中心</a>
                    </li>
                    <li class="nav-item {{ in_array($uri,['help','']) ? 'active' : '' }}">
                        <a class="nav-link" href="{{ toRoute('help') }}">帮助中心</a>
                    </li>
                    <li class="nav-item {{ in_array($uri,['about','']) ? 'active' : '' }}">
                        <a class="nav-link" href="{{ toRoute('about') }}">关于我们</a>
                    </li>
                </ul>
                <div id="loginDiv">
                    <button type="button" class="btn btn-danger" style="width: 120px;height: 40px;"
                            onclick="showModal()">登录
                    </button>
                </div>
                <div class="dropdown" id="userDiv" style="display: none">
                    <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                       data-bs-toggle="dropdown"
                       aria-expanded="false">
                        <span id="username"></span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">升级会员</a></li>
                        <li><a class="dropdown-item" href="#" onclick="loginOut()">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">登录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="login-model">
                    <div class="wei-login">
                        <p>扫码关注助友办公公众号进行登录</p>
                        <div class="login-border">
                            <img src="" class="login-code" style="width: 100%;display: none" id="loginImg"/>
                            <div class="spinner-border m-5" role="status" id="spinnerShow">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <div class="no-code" onclick="refreshCode()" id="refreshBtn" style="display: none">
                                点击刷新
                            </div>
                            <div class="no-code" onclick="refreshCode()" id="isScan" style="display: none">
                                请在微信【助友办公软件】内点击授权
                            </div>
                        </div>
                        <p class="expire-time" id="loginExpire" style="display: none">300秒后二维码将过期</p>
                        <p class="expire-time" id="guoqi" style="display: none">二维码已过期,点击刷新获取新二维码</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let target = '{{ $target }}';

    // 设置允许跨域
    axios.defaults.withCredentials = false;

    function setCookie(cName, value, expireDate) {
        const domain = 'zhuyou360.com';
        const exDate = new Date();
        exDate.setDate(exDate.getDate() + expireDate * 24 * 60 * 60 * 1000);
        document.cookie = cName + "=" + decodeURIComponent(value) + (expireDate == null ? "" : ";expires=" + exDate.toUTCString()) + ";path=/;domain=" + domain;
    }

    function getCookie(key) {
        return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(key).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
    }

    function randomStr() {
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
        }

        return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
    }

    function getSession() {
        let value = window.localStorage.getItem('tty_session');

        // 解决跨域问题
        if (!value) {
            return getCookie('tty_session');
        } else {
            return value;
        }
    }

    function setSession() {
        if (getSession()) {
        } else {
            // 解决跨域问题
            let value = 'web:' + randomStr();
            setCookie('tty_session', value, 7);
            window.localStorage.setItem('tty_session', value);
        }
    }

    setSession();

    function getLoginToken() {
        let value = window.localStorage.getItem('officialToken');

        if (!value) {
            return getCookie('officialToken');
        } else {
            return value;
        }
    }

    function setLoginToken(value) {
        setCookie('officialToken', value, 7);
        window.localStorage.setItem('officialToken', value);
    }

    function clearLoginToken() {
        setCookie('officialToken', '', 0);
        window.localStorage.setItem('officialToken', "");
    }

    let loginInterval = null;
    let checkScanInterval = null;
    let checkLoginInterval = null;

    let loginExpire = 0;
    let loginImg = '';
    let myModal = '';

    // 判断是否存在下载参数，存在则下载
    if (getPar('download')) {
        // 获取下载地址
        axios.post(target + '/download').then(function (response) {
            window.location.href = response.data.result
        })
    }

    // jiance
    checkLogin();

    function showModal() {
        refreshCode();

        myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
            keyboard: false
        })
        myModal.show();
    }

    // 刷新登录二维码
    function refreshCode() {
        clearLoginInterval();
        document.getElementById('spinnerShow').style.display = ''

        let data = {
            scene_str: getSession()
        }
        axios.post(target + '/api/wechat/createQrcode', data).then(function (response) {
            if (!response.data.error) {
                loginImg = response.data.result.url;
                document.getElementById('loginImg').style.display = ''
                document.getElementById('loginImg').src = loginImg
                document.getElementById('spinnerShow').style.display = 'none'
                document.getElementById('loginExpire').style.display = ''

                loginExpire = response.data.result.expire_seconds;
                document.getElementById('loginExpire').innerHTML = loginExpire + '秒后二维码将过期'
                loginInterval = setInterval(() => {
                    loginExpire--;
                    document.getElementById('loginExpire').innerHTML = loginExpire + '秒后二维码将过期'

                    if (loginExpire <= 0) {
                        clearLoginInterval();
                        document.getElementById('guoqi').style.display = ''
                        document.getElementById('loginImg').style.display = 'none'
                        document.getElementById('refreshBtn').style.display = ''
                    }
                }, 1000)

                checkScanInterval = setInterval(() => {
                    checkScan();
                }, 2000)
            }
        }).catch(function (error) {
            console.log(error);
        });
    }

    // 检查是否扫描
    function checkScan() {
        let data = {scene_str: getSession()}

        axios.post(target + '/api/wechat/checkScan', data).then(function (response) {
            if (!response.data.error) {
                //
                document.getElementById('isScan').style.display = ''
                document.getElementById('loginImg').style.display = 'none'

                checkLoginInterval = setInterval(() => {
                    checkLogin();
                }, 1000)
                // 清除扫描监听
                clearInterval(checkScanInterval);
            }
        }).catch(function (error) {
            console.log(error);
        });
    }

    // 检查是否登录
    function checkLogin() {
        let data = {scene_str: getSession()};
        axios.post(target + '/api/wechat/checkLogin', data)
            .then(function (response) {
                if (!response.data.error) {
                    clearLoginInterval();

                    setLoginToken(response.data.result);
                    getUserInfo();

                    myModal.hide();
                } else {
                    document.getElementById('loginDiv').style.display = '';
                    document.getElementById('userDiv').style.display = 'none';
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    // 清空登录有关定时器
    function clearLoginInterval() {
        clearInterval(loginInterval);
        clearInterval(checkLoginInterval);
    }

    // 获取用户信息
    function getUserInfo() {
        let token = getLoginToken();
        axios.post(target + '/api/login/getUserInfo', {}, {headers: {Authorization: token}}).then(function (response) {
            if (response.data.result) {
                let userInfo = response.data.result;
                document.getElementById('loginDiv').style.display = 'none'
                document.getElementById('userDiv').style.display = ''
                document.getElementById('username').innerHTML = '<img style="width:20px;margin-right:5px" src="' + userInfo.avatar + '"/>' + userInfo.username;
            }
        }).catch(function (error) {
            console.log(error);
        });
    }

    function loginOut() {
        if (confirm("你确认要退出登录吗？")) {
            let token = getLoginToken();
            axios.post(target + '/api/login/loginOut', {}, {headers: {Authorization: token}}).then(function (response) {
                if (!response.data.error) {
                    clearLoginToken();
                    window.location.reload();
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    }

    function getPar(par) {
        //获取当前URL
        let local_url = document.location.href;
        //获取要取得的get参数位置
        let get = local_url.indexOf(par + "=");
        if (get === -1) {
            return false;
        }
        //截取字符串
        let get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        let nextPar = get_par.indexOf("&");
        if (nextPar !== -1) {
            get_par = get_par.slice(0, nextPar);
        }
        return get_par;
    }

    /**
     * todo 测试登录 后期删除
     */
    // axios.post(target + '/api/login/testLogin', {})
    //     .then(function (response) {
    //         if (response.data.result) {
    //             clearLoginInterval();
    //
    //             setLoginToken(response.data.result);
    //             getUserInfo();
    //
    //             myModal.hide();
    //         } else {
    //             document.getElementById('loginDiv').style.display = '';
    //             document.getElementById('userDiv').style.display = 'none';
    //         }
    //     })
    //     .catch(function (error) {
    //         console.log(error);
    //     });

</script>