帆软实现单点登录

前言

最近接了一个2周就要上线的省级项目, 实属无奈,搞了个单点登录

上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <template>
          <div class="wrap" v-if="isError">
            <div class="logo">
              <h1>Error</h1>
                <p>{{msg}}</p>
                <div class="sub">
                <p><a @click="closeWindow">关闭</a></p>
              </div>
            </div>
          </div>
        </template>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- jquery -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                isSuccessFlag: false,
                isError: false,
                requestInfo: '',
                msg: '',
                userInfo: {},
                title: '登录中，请稍等。。。'
            }
        },
        created() {
            let u = this.getQueryString('u')
            if (u) {
                const d = eval('(' + u + ')');
                this.userInfo = {
                    fr_username: d.n,
                    fr_password: d.p,
                }
                this.openLoading()
            } else {
                this.isError = true
                this.msg = "参数不完整，请关闭后重新打开。"
            }
        },
        methods: {
            closeWindow() {
                var userAgent = navigator.userAgent;
                if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
                    location.href = "about:blank";
                } else {
                    window.opener = null;
                    window.open('', '_self');
                }
                window.close();
            },
            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },

            async openLoading() {
                let loading = this.$loading({
                    lock: true,
                    text: this.title,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                await this.getFrToken()
                if (!this.isSuccessFlag || !this.requestInfo) {
                    loading.close();
                    this.isError = true
                    this.msg = "账号或密码错误！"
                    return;
                }
                this.title = '登录完成，即将进入主页。'
                setTimeout(() => {
                    loading.close();
                    window.location.replace('https://report.zjedu.gov.cn/webroot/decision')
                }, 1000)
            },

            getFrToken() {
                const url = `https://report.zjedu.gov.cn/webroot/decision/login/cross/domain?validity=-1&fine_username=${this.userInfo.fr_username}&fine_password=${this.userInfo.fr_password}`
                $.ajax({
                    type: "get",
                    url: url,
                    async: false,
                    success: (res) => {
                        let d = res.replaceAll('callback', '')
                        let info = d.substr(1, d.length - 2)
                        this.requestInfo = JSON.parse(info)
                        if (this.requestInfo.status == 'success') {
                            this.isSuccessFlag = true
                        } else {
                            // this.$message.error("账号或密码错误！")
                            this.isError = true
                            this.isSuccessFlag = false
                        }
                    },
                    error: (err) => {
                        console.log(err);
                        this.msg = "请求失败"
                        this.isError = true
                        this.isSuccessFlag = false
                    }
                })
            }
        }
    })
</script>
<!DOCTYPE HTML>
<style type="text/css">
    body {}
    
    body {
        background: #f3f3e1;
    }
    
    .wrap {
        margin: 0 auto;
        width: 1000px;
    }
    
    .logo {
        margin-top: 50px;
    }
    
    .logo h1 {
        font-size: 200px;
        color: #8F8E8C;
        text-align: center;
        margin-bottom: 1px;
        text-shadow: 1px 1px 6px #fff;
    }
    
    .logo p {
        color: rgb(228, 146, 162);
        font-size: 17px;
        margin-top: 1px;
        text-align: center;
    }
    
    .logo p span {
        color: lightgreen;
    }
    
    .sub a {
        color: white;
        background: #8F8E8C;
        text-decoration: none;
        padding: 7px 120px;
        font-size: 10px;
        font-weight: bold;
        -webkit-border-radius: 3em;
        -moz-border-radius: .1em;
        -border-radius: .1em;
    }
</style>



</html>