simulation-front/src/views/login.vue

<template>
    <div class="loginPanel">
        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
            <el-form-item label="用户名:" prop="username">
                <el-input
                    placeholder="请输入"
                    maxlength="30"
                    v-autoTrim="{ obj: form, key: 'username' }"
                    v-model="form.username"
                >
                </el-input>
            </el-form-item>

            <el-form-item label="密码:" prop="password">
                <el-input
                    placeholder="请输入"
                    type="password"
                    maxlength="16"
                    v-autoTrim="{ obj: form, key: 'password' }"
                    v-model="form.password"
                >
                </el-input>
            </el-form-item>

            <div class="btns">
                <el-button type="primary" @click="toLogin">登录</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "login", // 登录
    components: {},
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                    },
                ],
            },
            i: 0,
        };
    },

    computed: {},

    methods: {
        toLogin() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "post",
                        url: this.$api.common.username,
                        data: this.form,
                    }).then((res) => {
                        if (res.code == 200 && res.info) {
                            let Authorization = res.info.token_type + ' ' + res.info.access_token;
                            let refreshToken = res.info.refresh_token;
                            let expiresTime = res.info.expires_time;

                            localStorage.clear();
                            localStorage.setItem(
                                "Authorization",
                                Authorization
                            );
                            localStorage.setItem("refreshToken", refreshToken);
                            localStorage.setItem("expiresTime", expiresTime);
                            localStorage.setItem("username", this.form.username)

                            let tokenTimer = null;
                            let toExpiresTime =
                                new Date(expiresTime).getTime() -
                                new Date().getTime();
                            if (toExpiresTime < 5*60 * 1000) {
                                this.getRefreshToken()
                            }else{
                                this.$router.push({ path: "/mainPage" });
                            }
                            
                        } else {
                            this.$message.error(res.message || "登录失败");
                        }
                    });
                }
            });
        },
        getRefreshToken() {
            this.$axios({
                method: "post",
                url: this.$api.common.refreshToken,
                data: {
                    refreshToken: localStorage.getItem("refreshToken"),
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    let Authorization = res.info.token_type + ' ' + res.info.access_token;
                    let refreshToken = res.info.refresh_token;
                    let expiresTime = res.info.expires_time;

                    localStorage.clear();
                    localStorage.setItem("Authorization", Authorization);
                    localStorage.setItem("refreshToken", refreshToken);
                    localStorage.setItem("expiresTime", expiresTime);

                    this.$router.push({ path: "/mainPage" });
                    
                } else {
                    this.$message.error(res.message || "获取refresh_token失败");
                }
            });
        },
    },

    // mounted: {},
};
</script>

<style lang='less' scoped>
.loginPanel {
    padding: 100px;

    .el-form {
        width: 60%;
        margin: 0 auto;
        padding-bottom: 45px;

        /deep/ .el-input,
        .el-select {
            width: 100%;
        }
    }

    .btns {
        padding-top: 30px;
        text-align: center;
    }
}
</style>