login

src/views/login.vue

@@ -0,0 +1,181 @@
+<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: "请输入最多16位密码",
+                        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 =
+                                "Bearer " + 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);
+
+                            let tokenTimer = null;
+                            let toExpiresTime =
+                                new Date(expiresTime).getTime() -
+                                new Date().getTime();
+
+                            console.log("go1", toExpiresTime);
+                            // 过期时间前60秒即可发送获取新的token
+                            if (toExpiresTime > 60 * 1000) {
+                                tokenTimer = setTimeout(() => {
+                                    this.getRefreshToken();
+                                    clearTimeout(tokenTimer);
+                                    // }, toExpiresTime - 60 * 1000);
+                                }, 15 * 1000);
+                            } else {
+                                this.getRefreshToken();
+                            }
+
+                            this.$message.success("登录成功");
+                            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 = "Bearer " + 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);
+
+                    let tokenTimer = null;
+                    let toExpiresTime =
+                        new Date(expiresTime).getTime() - new Date().getTime();
+
+                    // 过期时间前60秒即可发送获取新的token
+                    console.log("go", toExpiresTime);
+                    if (toExpiresTime > 60 * 1000) {
+                        tokenTimer = setTimeout(() => {
+                            this.i++;
+                            if (this.i >= 10) {
+                                clearTimeout(tokenTimer);
+                                return;
+                            }
+                            this.getRefreshToken();
+                            clearTimeout(tokenTimer);
+                            // }, toExpiresTime - 60 * 1000);
+                            // Bearer 59d5d321-f16c-4412-9177-7f7d1e9180aa
+                        }, 15 * 1000);
+                    } else {
+                        this.getRefreshToken();
+                    }
+                } 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>