erp/resources/frontend/src/views/Login.vue

<template>
    <div class="backimg">
        <div class="sign">
            <span class="title">Hi 欢迎使用</span>
            <p class="manage">
                <img src="../css/img/养花人2_画板 1 副本 15.png" alt="" /><span>ERP管理系统</span>
            </p>
            <p class="title-1">登录</p>
            <div class="row">
                <el-input placeholder="请输入用户名" v-model="form.name" size="large" />
            </div>
            <div class="row">
                <el-input show-password placeholder="请输入密码" v-model="form.password" size="large" />
            </div>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
            <br />
            <el-button type="primary" @click="Login()" @keyup.enter="Login()" :loading="loading">登 录</el-button>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { getRoleInfo } from "@/api/role.js"

export default {
    data() {
        return {
            loading: false,
            checked: false, //记住密码变量
            form: {
                //用户名和密码
                name: "",
                password: "",
            },
        };
    },
    mounted() {
        this.getCookie();
        window.addEventListener('keydown', this.keyDown);
    },
    methods: {
        Login() {
            // 判断记住密码复选框是否被勾选 勾选则调用配置cookie方法
            if (this.checked === true) {
                this.setCookie(this.form.name, this.form.password, true, 7);
            } else {
                this.clearCookie();
            }
            //判断用户名和密码是否为空
            if (this.form.name === "" || this.form.password === "") {
                this.$message({
                    message: "账号或密码不能为空",
                    type: "error",
                });
            } else {
                this.loading = true
                axios.post("/api/auth/login", this.form).then((res) => {
                    let data = res.data;
                    if (data.error) {
                        this.$message({
                            message: "账号或密码错误，请重新输入",
                            type: "error",
                        });
                        this.form.name = "";
                        this.form.password = "";
                        this.checked = false;
                        this.loading = false
                    }

                    if(data.token) {
                        localStorage.setItem("userName", this.form.name);
                        this.form = {};
                        localStorage.setItem("token", data.token);
                        getRoleInfo().then((res) => {
                            console.log(res.data.roles)
                            if(res.data.roles && res.data.roles[0]) {
                                localStorage.setItem("roleName", res.data.roles[0].name)
                                this.$message({
                                    message: "成功登录，欢迎来到后台管理系统",
                                    type: "success",
                                })
                                this.$router.push("/GOODS_LIST")
                            }
                            this.loading = false
                        }).catch(() => {
                            this.loading = false
                        })
                    }
                });
            }
        },
        // 设置cookie
        setCookie(c_name, c_pwd, c_state, exdays) {
            const exdate = new Date();
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
            window.document.cookie =
                "name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "state" + "=" + c_state + ";path=/;expires=" + exdate.toGMTString();
        },
        // 读取cookie
        getCookie() {
            if (document.cookie.length > 0) {
                const arr = document.cookie.split("; ");
                for (let i = 0; i < arr.length; i++) {
                    const arr2 = arr[i].split("=");
                    if (arr2[0] === "name") {
                        this.form.name = arr2[1];
                    } else if (arr2[0] === "password") {
                        this.form.password = arr2[1];
                    } else if (arr2[0] === "state") {
                        this.checked = Boolean(arr2[1]);
                    }
                }
            }
        },
        // 清除cookie
        clearCookie: function () {
            this.setCookie("", "", false, -1);
        },
        keyDown(e) {
            if (13 === e.keyCode) {
                this.Login();
            }
        }
    },
    destroyed() {
        window.removeEventListener('keydown', this.keyDown, false);
    }
};
</script>

<style lang="scss" scoped>
.backimg {
    width: 100%;
    height: 1080px;
    background-image: url("./../css/img/组 32.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
}

.sign {
    width: 400px;
    height: 500px;
    position: absolute;
    top: 270px;
    right: 300px;
    .row{
        margin-bottom: 20px;
    }

    .title {
        width: 125px;
        height: 23px;
        font-size: 22px;
        font-family: "BigruixianBlackGBV1.0";
        font-weight: 400;
        line-height: 23px;
        color: #2b53ec;
        opacity: 1;
    }

    .manage {
        margin-top: 19px;
        margin-bottom: 50px;
        img {
            margin-right: 20px;
        }
        span {
            width: 340px;
            height: 57px;
            font-size: 54px;
            font-family: "BigruixianBlackGBV1.0";
            font-weight: 400;
            line-height: 57px;
            color: #2b53ec;
            opacity: 1;
        }
    }

    .title-1 {
        width: 70px;
        height: 35px;
        font-size: 35px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 60px;
        color: #393939;
        opacity: 1;
        margin-bottom: 35px;
    }

    .el-button {
        width: 400px;
        height: 45px;
        background: rgba(43, 83, 236);
        border-radius: 5px;
        margin-top: 40px;
    }

    .el-checkbox {
        color: rgba(43, 83, 236);
    }
}
</style>