peisweb/src/views/login/Login.vue

<template>
  <div class="bg">
    <div class="box">
      <div class="mainbody">
        <div class="title">系统登录</div>
        <div class="userform">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="Username">
              <el-input
                v-model="form.Username"
                placeholder="用户名"
                prefix-icon="el-icon-s-custom"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="Password">
              <el-input
                v-model="form.Password"
                placeholder="密码"
                type="password"
                prefix-icon="el-icon-unlock"
              ></el-input>
            </el-form-item>
            <el-button type="primary" class="btn" @click="onSubmit(form)"
              >用户登录</el-button
            >
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { lognis } from "@/request/ruquset";
import { yzstr } from "@/utlis/validate.js";
import { yztoken, writetoken } from "@/utlis/istoken";
import mm from "@/utlis/mm";

export default {
  data() {
    return {
      form: {
        Username: "",
        Password: "",
      },
      rules: {
        Username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        Password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // lognis({
          //   client_id: "Peis_App",
          //   grant_type: "password",
          //   username: "admin",
          //   password: "1q2w3E*",
          //   scope: "Peis",
          // }).then(res=>{
          //   console.log(res,'222')
          // })
          // lognis({
          //   client_id: "Peis_App",
          //   grant_type: "password",
          //   username: "admin",
          //   password: "1q2w3E*",
          //   scope: "Peis",
          // }).then((res) => {
          //   console.log(res);
          // });  "http://81.70.217.145:9529/connect/token",
          this.$axios
            .post(
              mm.apiurl + "/connect/token",
              {
                client_id: "Peis_App",
                grant_type: "password",
                username: this.form.Username, //admin
                password: this.form.Password, //1q2w3E
                scope: "Peis offline_access",
              },
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            )
            .then((res) => {
              console.log(res.data)
              writetoken(res.data.expires_in);
              window.localStorage.setItem("token", res.data.access_token);
              window.localStorage.setItem("refresh_token",res.data.refresh_token);
              // window.localStorage.setItem("expires_in", res.data.expires_in);
              window.localStorage.setItem("tokentype", res.data.token_type);
              window.localStorage.setItem("user", this.form.Username);              
              this.$message.success("登录成功");
              this.$router.push({ path: "home" });
            });
        }
      });
    },
    tuichui() {
      let token = localStorage.getItem("token");
      let tokentype = localStorage.getItem("tokentype");
      this.$axios
        .get("http://192.168.1.108:44394/api/identity/users", {
          params: {
            SkipCount: 1,
            MaxResultCount: 1,
          },
          headers: {
            Authorization: `${tokentype} ${token}`,
          },
        })
        .then((res) => {
          console.log(res);
        });
    },
    users() {
      this.$axios.put(
        "http://192.168.1.108:44394/api/permission-management/permissions",
        {
          providerName: "R",
          providerKey: "sdsaf",
        }
      );
    },
  },
  created() {
    // let date = moment();
    // date.add(3600, 's');
    // console.log(parseInt(new Date(date).getTime() / 1000) + '')
    // // console.log(this.$moment);
    // console.log('33');
    // console.log(parseInt(new Date().getTime() / 1000) + '');
  },
};
</script>

<style lang="scss" scoped>
.bg {
  background-color: black;
  // background: url("https://img.zcool.cn/community/013c8b5b62d108a801206a35bea1eb.jpg@2o.jpg");1
  background: url("https://img1.baidu.com/it/u=1097534320,1746985227&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500");
  height: 100%;
  width: 100%;
  min-height: 100vh;
}

.box {
  width: 400px;
  height: 300px;
  display: flex;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}

.mainbody {
  .title {
    width: 400px;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
  }
}

.userform {
  margin-top: 20px;
  padding: 20px;
}

.btn {
  width: 100%;
}
</style>