admin_home/src/views/login/index.vue

<template>
    <div class="appBox">
        <div class="mainBox">
            <div class="leftBox">
                <!--大标题-->
                <div class="titleBox">
                    <div class="titleEnglish">Operation Management Platform</div>
                    <div class="titleChinaeseBox">
                        <span class="titleChinasesTop">政讯通<br></span>
                        <span class="titleChinasesBottom">运营管理平台</span>
                    </div>
                </div>
                <!--背景颜色-->
                <div class="yellow" />
                <div class="blue" />
                <!--人物图片-->
                <img src="@/assets/login/Picture.png" class="TitleImg">
            </div>
            <div class="rightBox">
                <!--form登陆框-->
                <div class="loginFormBox">
                    <!--开始验证表单 start-->
                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
                        label-position="left">
                        <div class="inputBox greyBg">
                            <img src="@/assets/login/id-card-outline.png" class="inputIcon">
                            <el-form-item prop="username">
                                <el-input ref="username" 
                                    v-model="loginForm.username" 
                                    placeholder="请输入手机号"
                                    name="username" 
                                    type="text" 
                                    tabindex="1" 
                                    autocomplete="off" 
                                />
                            </el-form-item>
                        </div>
                        <div class="inputBox greyBg">
                            <img src="@/assets/login/bag-remove-outline.png" class="inputIcon">
                            <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
                                <el-form-item prop="password">
                                    <el-input :key="passwordType" 
                                        ref="password" 
                                        v-model="loginForm.password"
                                        :type="passwordType" 
                                        placeholder="请输入密码" 
                                        name="password" 
                                        tabindex="2"
                                        autocomplete="off" 
                                    />
                                    <span class="show-pwd" @click="showPwd">
                                        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                                    </span>
                                </el-form-item>
                            </el-tooltip>
                        </div>
                        <!-- <div class="inputBoxSpecial">
                            <div class="inputBoxLeft greyBg">
                                <img src="@/assets/login/hardware-chip-outline.png" class="inputIcon">
                                <el-form-item prop="captcha">
                                <el-input
                                    ref="captcha"
                                    v-model="loginForm.captcha"
                                    placeholder="图形验证码"
                                    name="captcha"
                                    type="text"
                                    tabindex="3"
                                    maxlength="4"
                                    autocomplete="off"
                                />
                                </el-form-item>
                            </div>
                            <div class="inputBoxRight greyBg">
                                <div class="submitCode">
                                <img :src="codeImg" class="codeImg" @click="getImgCode">
                                </div>
                                <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
                            </div>
                        </div> -->
                        <el-button :loading="loading" type="primary" class="loginBtn"
                            @click.native.prevent="singleLogin">
                            登录
                        </el-button>
                        <!-- <div class="singleLogin" @click="goBackWebUrl"><i class="el-icon-refresh-right" /> 点此返回原网站</div> -->
                    </el-form>
                    <!--开始验证表单 end-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { validUserPhone } from '@/utils/validate'
import axios from 'axios'
import BASEURL from '@/utils/baseUrl'
import { getToken, getTokenTest, removeToken,setLoginStatus,setUserUrl } from '@/utils/auth'

export default {
    name: 'Login',
    data() {
        // 配置验证规则：用于表单验证
        const validateUsername = (rule, value, callback) => {
            if (!validUserPhone(value)) {
                callback(new Error('请输入正确的手机号！'))
            } else {
                callback()
            }
        }
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error('密码不能低于6位！'))
            } else {
                callback()
            }
        }
        const validateCode = (rule, value, callback) => {
            if (value.length < 4) {
                callback(new Error('图形验证码不能低于4位！'))
            } else {
                callback()
            }
        }
        // 本页基础数据
        return {
            loginForm: { // 1.用户使用哪些信息登录
                username: '', // 15210211200
                password: '', // 111111
                type: 1, //1=账号密码登录
                captcha: '',//验证码图片
                code: ''//验证code
            },
            loginRules: { // 2.配置from表单验证规则
                username: [{ required: true, trigger: 'blur', validator: validateUsername }],
                password: [{ required: true, trigger: 'blur', validator: validatePassword }],
                captcha: [{ required: true, trigger: 'blur', validator: validateCode }]
            },
            passwordType: 'password', // 3.密码域默认type 当显示密码的时候改为text
            capsTooltip: false,
            loading: false,
            showDialog: false,
            redirect: undefined,
            otherQuery: {},
            // 图像验证码
            captchaText: '', // 保存生成的验证码文本
            captchaInput: '', // 用户输入的验证码
            codeImg: '' // 图形验证码
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                const query = route.query
                if (query) {
                    this.redirect = query.redirect
                    this.otherQuery = this.getOtherQuery(query)
                }
            },
            immediate: true
        }
    },
    // created() {
    //   let token = getToken();
    //   //查询登录状态
    //   this.$store.dispatch('user/logoutStatus', {"token":token}).then( res => {
    //     if(res.code==200){
    //       //token有效，不执行操作
    //     }else{
    //       //如果token过期，就清理掉token
    //       removeToken()
    //       console.log("token已过期!")
    //       //this.$message.error(res.message)
    //     }
    //   }).catch(() => {
    //     this.$message.error("查询登录状态失败，请重新登录！")
    //   })
    // },
    mounted() {
        this.getImgCode()
    },
    watch: {
        $route: {
            handler: function (route) {
                const query = route.query
                if (query) {
                    this.redirect = query.redirect
                    this.otherQuery = this.getOtherQuery(query)
                }
            },
            immediate: true
        }
    },
    methods: {
        // 检查输入状态
        checkCapslock(e) {
            const { key } = e
            this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
        },
        // 切换密码框的显示与隐藏
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        // 提交表单并跳转
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    //console.log(this.loginForm)
                    //开始登录
                    this.loading = true
                    this.$store.dispatch('user/login', this.loginForm)
                        .then(res => {
                            this.loading = false
                            console.log(res)
                            if (res.code == 0) {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            } else if (res.code == 200) {
                                console.log("登录成功，将跳转至详情页面！")
                                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
                            } else if (res.code != 0 && res.code != 200) {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            }
                        })
                        .catch(() => {
                            this.loading = false
                        })
                } else {
                    console.log('表单填写错误！请检查！')
                    return false
                }
            })
        },
        // 请求图形验证码
        getImgCode() {
            const that = this
            this.$store.dispatch('user/getImgCode').then(res => {
                if (res.code == 200) {
                    console.log(res)
                    //that.codeImg = res.data
                    that.codeImg = res.data.img;
                    that.loginForm.code = res.data.code;

                    console.log(that.loginForm)
                } else {
                    this.$message.error("获取验证码失败，请稍后再试！")
                }

            }).catch(() => {
                this.loading = false
            })
        },
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {})
        },
        // 单点登录 start ---------------------------------------->
        // 使用字符串操作提取 backurl 参数的值
        getBackUrl(url) {
            const params = url.split('?')[1]; // 获取问号后面的部分
            if (params) {
                const paramArray = params.split('&'); // 分割参数
                for (let param of paramArray) {
                    const [key, value] = param.split('='); // 分割键值对
                    if (key === 'backurl') {
                        return decodeURIComponent(value); // 返回解码后的 backurl 值
                    }
                }
            }
            return null; // 如果没有找到 backurl 参数，返回 null
        },
        //登录分路器 start ---------------------------------------->
        singleLogin() {
            //获得当前域名
            const urlString = window.location.href;
            // 创建一个URL对象
            const url = new URL(urlString);
            // 获取hash部分（即#后面的部分）
            const hash = url.hash;
            // 从hash中提取查询参数
            const hashParams = new URLSearchParams(hash.split('?')[1]);
            // 获取backurl参数的值
            const backurl = hashParams.get('backurl');
            // 获取backurl参数的值
            const userurl = hashParams.get('userurl');
            // 获取可能出现的内部值
            const system = hashParams.get('redirect');

            // 解码backurl
            const decodedBackurl = decodeURIComponent(backurl);
            const decodedUserurl = decodeURIComponent(userurl);

            // 第一种情况， 不含有backUrl或者userUrl 说明登录者是超级管理员
            if (hashParams.size == 0 || system == '/dashboard') {
                // 获取当前网址
                const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
                console.log("当前网址是：" + currentUrl);
                console.log("执行超级管理员登录！")
                this.login(1, currentUrl)
                setUserUrl(currentUrl, 86400)
            } else {
                // 第二种情况，含有backurl 说明是单点登录
                if (backurl != null) {
                    console.log("执行单点登录！")
                    const backurlObj = new URL(decodedBackurl);
                    const back_url = backurlObj.hostname;
                    this.login(2, back_url)

                } else if (userurl != null) {
                    //第三种情况 含有userurl 说明是会员登录
                    console.log(user_url)
                    console.log("执行会员登录！")
                    const backurlObj = new URL(decodedUserurl);
                    const user_url = backurlObj.hostname;
                    if (user_url == "") {
                        this.$message.error("登录链接错误！")
                    } else {
                        console.log("当前登录链接是：" + user_url)
                        this.login(3, user_url)
                    }
                } else {
                    //this.$message.error("检查登录链接失败，请从正规渠道登录！")
                    //2025-3-21 不在验证其他可能的值，直接允许登录
                    const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
                    console.log("当前网址是：" + currentUrl);
                    console.log("执行超级管理员登录！")
                    this.login(1, currentUrl)
                    setUserUrl(currentUrl, 86400)
                }
            }
        },
        // 登录分路器 end ---------------------------------------->
        // 登录 start ---------------------------------------->
        login(type, url) {

            console.log(BASEURL.WebCloginUrl)

            //超级管理员登录
            if (type == 1) {
                if (url == null || url == undefined || url == '') {
                    this.loginForm.userurl = "localhost"
                } else {
                    // 获取当前页面的 URL
                    this.loginForm.userurl = url;
                }

                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.$store.dispatch('user/login', this.loginForm).then(res => {
                            this.loading = false
                            console.log(res)
                            if (res.code == 0) {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            } else if (res.code == 200 && res.token != '') {
                                this.sendUrlServ()
                                console.log("登录成功，将跳转至详情页面222！")
                                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
                            } else if (res.code != 0 && res.code != 200) {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            } else if (res.token == '' || res.token == null || res.token == undefined) {
                                this.$message({
                                    type: 'error',
                                    message: "登录失败！未能正确获取用户token，请重试！"
                                })
                            }
                        })
                    } else {
                        console.log('表单填写错误！请检查！')
                        return false;
                    }
                })
            }
            //单点登录
            if (type == 2) {
                // 获取当前页面的 URL
                this.loginForm.backurl = url;

                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.$store.dispatch('user/login', this.loginForm)
                            .then(res => {
                                this.loading = false
                                console.log(res)
                                if (res.code == 0) {
                                    this.$message({
                                        type: 'error',
                                        message: res.message
                                    })
                                } else if (res.code == 200 && res.token != '') {
                                    const currentUrl = window.location.href;
                                    const backurlValue = this.getBackUrl(currentUrl);
                                    console.log("单点登录成功，开始启动跳转！")
                                    console.log(backurlValue)
                                    console.log(res.data.token)
                                    this.sendUrlServ()

                                    //王鹏
                                    //window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token=' + res.data.token; //dev返回链接
                                    //刘佳伟
                                    //window.location.href = BASEURL.webClogBackUrL + '?backurl=' + backurlValue + '&token=' + res.data.token; //pre返回地址
                                    //我
                                    window.location.href = backurlValue + '?backurl=' + backurlValue + '&admintoken=' + res.data.token; //pre返回地址

                                } else if (res.code != 0 && res.code != 200) {
                                    this.$message({
                                        type: 'error',
                                        message: res.message
                                    })
                                }
                            })
                            .catch(() => {
                                this.loading = false
                            })
                    } else {
                        console.log('表单填写错误！请检查！')
                        return false
                    }
                })

            }
            //会员登录
            if (type == 3) {
                this.loginForm.userurl = url;
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$store.dispatch('user/login', this.loginForm).then(res => {
                            this.loading = false
                            console.log(res)
                            if (res.code == 0 || res.code == -1) {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            } else if (res.code == 200 && res.token != '') {
                                this.sendUrlServ()
                                console.log("登录成功，将跳转至详情页面！")
                                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
                            } else if (res.code != 0 && res.code != 200) {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            } else if (res.token == '' || res.token == null || res.token == undefined) {
                                this.$message({
                                    type: 'error',
                                    message: "登录失败！未能正确获取用户token，请重试！"
                                })
                            }

                        })
                    } else {
                        console.log('表单填写错误！请检查！')
                        return false;
                    }
                })
            }
        },
        // 登录 end ---------------------------------------->

        // 返回原网站 start---------------------------------------->
        goBackWebUrl() {
            // 获得当前域名
            const urlString = window.location.href;
            // 创建一个URL对象
            const url = new URL(urlString);
            // 获取hash部分（即#后面的部分）
            const hash = url.hash;
            // 从hash中提取查询参数
            const hashParams = new URLSearchParams(hash.split('?')[1]);
            // 获取backurl参数的值
            const backurl = hashParams.get('backurl');
            // 解码backurl
            const decodedBackurl = decodeURIComponent(backurl);

            if (hashParams.size != 0 && backurl != null) {
                window.location.href = decodedBackurl
            } else {
                this.$message.error("无法返回原网站，请检查登录地址链接！")
            }
        },
        //登录成功通知后端 上面还有一个
        sendUrlServ() {
            //axios.get('http://admindev.bjzxtw.org.cn/auth/loginapi.php',{params: {
            // axios.get(BASEURL.WebCloginUrl,{params: {
            //     token: this.$store.state.user.token
            // }}).then(res => {
            //   console.log(res)
            // }).catch(err => {
            //   console.log(err)
            // });

            // 新做的，待替换
            // this.$store.dispatch('user/loginapi', {
            //   token: this.$store.state.user.token
            // }).then(res => {
            //   console.log("单点登录成功！")
            // }).catch(err => {
            //   console.log(err)
            // })
        },
    }
}
</script>

<style scoped lang="less">
.singleLogin {
    font-size: 18px;
    color: #666;
    cursor: pointer;
    margin-top: 30px;
    width: 400px;
    text-align: center;
}

/*整体盒子模型 使用display flex布局保持中间主体始终居中*/
.appBox {
    clear: both;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    /*中央盒子模型 在1920x1080下将会保持恒定的显示效果 低于这个分辨率左侧将会自动收缩*/
    .mainBox {
        width: 100%;
        max-width: 1920px;
        display: flex;
        justify-content: center;
        margin: 0 auto;

        .leftBox {
            width: 55%; //左侧自动收缩 最低1057 最高1920 1057/1920=55%
            max-width: 1057px;
            margin-right: 50px;
            max-height: 585px;
            height: 100vh; //自适应全屏高度
            position: relative;
        }

        .rightBox {
            max-width: 400px;
            height: 360px;
            position: relative;
        }
    }

    /*中央左侧main内容*/

    /*1.标题文字 start*/
    .titleBox {
        width: 516px;
        height: 280px;
        position: absolute;
        z-index: 9999;
        top: 5%;
        left: 2%;

        .titleEnglish {
            left: 0px;
            top: 238px;
            position: absolute;
            color: #333333;
            font-size: 32px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            word-wrap: break-word
        }

        .titleChinaeseBox {
            left: 0px;
            top: 0px;
            position: absolute;

            .titleChinasesTop {
                color: #5570F1;
                font-size: 86px;
                font-family: Microsoft YaHei;
                font-weight: 700;
                word-wrap: break-word
            }

            .titleChinasesBottom {
                color: #333333;
                font-size: 86px;
                font-family: Microsoft YaHei;
                font-weight: 700;
                word-wrap: break-word
            }
        }
    }

    /*标题文字 end*/

    /*2.背景颜色 start*/
    .yellow,
    .blue {
        width: 226px;
        height: 226px;
        position: absolute;
    }

    .yellow {
        z-index: 1000;
        opacity: 0.45;
        top: 0;
        left: 0;
        background: #DDA82A;
        border-radius: 50%;
        filter: blur(120px)
    }

    .blue {
        z-index: 1001;
        bottom: 15%;
        left: 20%;
        background: #4461F2;
        border-radius: 50%;
        filter: blur(150px)
    }

    /*背景颜色 end*/

    /*3.背景图 start*/
    .TitleImg {
        display: block;
        position: absolute;
        z-index: 1100;
        right: 0;
        bottom: 0;

        @media (max-width: 1366px) and (max-height: 768px) {
            transform: scale(0.7); //稍微缩小
        }
    }

    /*背景图 end*/

    /*中央右侧main内容*/
    /*登录框 start*/
    .loginFormBox {
        margin-top: 15%;

        .inputBox {
            margin-bottom: 30px;

            .inputIcon {
                width: 24px;
                height: 24px;
                margin: 0 20px 0 20px;
            }

            .inputIconSmall {
                width: 18px;
                height: 18px;
            }
        }

        .inputBoxSpecial {
            justify-content: space-between;
            margin-bottom: 80px;
        }

        .inputBox,
        .inputBoxSpecial {
            height: 52px;
            width: 400px;
            box-sizing: border-box;
            align-items: center;
            display: flex;

            input {
                border: 0;
                background: transparent;
                font-size: 18x;
            }

            input:focus {
                outline: none;
            }
        }

        .greyBg {
            background: rgba(239, 241, 249, 0.60);
            border-radius: 8px;
        }

        .inputBoxLeft {
            width: 250px;
            height: 52px;
            box-sizing: border-box;
            align-items: center;
            display: flex;

            input {
                width: 150px;
                font-size: 16px;
            }

            .inputIcon {
                width: 24px;
                height: 24px;
                margin: 0 20px 0 20px;
            }
        }

        .inputBoxRight {
            width: 140px;
            height: 52px;
            position: relative;

            .submitCode {
                height: 52px;
                box-sizing: border-box;
                padding-top: 5px;
                padding-left: 10px;
                cursor: pointer;

                .codeImg {
                    display: block;
                    width: 120px;
                    height: 42px;
                }
            }
        }

        .reloadBtn {
            color: #5570F1;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            word-wrap: break-word;
            position: absolute;
            bottom: -20px;
            right: 0;
            cursor: pointer
        }

        .loginBtn {
            width: 400px;
            height: 58px;
            background: #5570F1;
            box-shadow: 0px 4px 19px rgba(85, 112, 241, 0.40);
            border-radius: 12px;
            font-size: 24px;
            color: #fff;
            border: 0;
        }


    }
}

/*验证码*/
.captcha-img {
    cursor: pointer;
    width: 120px;
    height: 40px;
    /* 调整验证码图片大小 */
}

.show-pwd {
    margin-left: 30px;
}

/*登录框 end*/

/*此处修改了element-ui中的部分内置样式，但是通过css-scope可以保证不会污染到全局*/
/*在index中使用deep或者>>>深度选择器来修改el-input的默认样式*/

/deep/ .el-input__inner {
    background: transparent;
    width: 100%;
    border: 0;
    //border:0
}

/deep/ .el-form-item {
    margin-bottom: 0;
}

/deep/ .el-form-item__content {
    display: flex;
    width: 300px;
}

/deep/ .el-form-item__error {
    bottom: -34px;
    left: 15px;
    line-height: 30px;
}
</style>