|
|
@@ -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>
|
zhangliang2