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-button  id="btn" type="primary" data-parms="11111111" class="btn">测试</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";
import { getapi, postapi } from "@/api/api";

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) {
          // let res = await getapi("/api/identity/users/login", {
          //   username: this.form.Username,
          //   password: this.form.Password,11
          // });
          var msgs = "";
          getapi("/api/identity/users/login", {
            username: this.form.Username,
            password: this.form.Password,
          })
            .then((ret) => {
              msgs = ret.data.msg;
              if (ret.code != -1 && ret.data.code == 1 && ret.code == 1) {
                return this.$axios.post(
                  mm.apiurl + "/connect/token",
                  {
                    client_id: "Peis_App",
                    grant_type: "password",
                    username: this.form.Username,
                    password: this.form.Password,
                    scope: "Peis offline_access",
                  },
                  {
                    headers: {
                      "Content-Type": "application/x-www-form-urlencoded",
                    },
                  }
                );
              } else {
                this.$message.warning(ret.data.msg);
              }
            })
            .then((res) => {
              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("tokentype", res.data.token_type);
              window.localStorage.setItem("user", this.form.Username);
              this.$message.success(msgs,+"登录成功");
              this.$router.push({ path: "home" });
              this.$store.state.changepassword = this.form.Password;
            })
            .catch((err) => {});

          //   console.log(res);
          //   if (res.data.code == 1 && res.code == 1) {
          //     console.log(res.data.msg);
          //     postapi()
          //     let ress = await this.$axios.post(
          //       mm.apiurl + "/connect/token",
          //       {
          //         client_id: "Peis_App",
          //         grant_type: "password",
          //         username: this.form.Username,
          //         password: this.form.Password,
          //         scope: "Peis offline_access",
          //       },
          //       {
          //         headers: {
          //           "Content-Type": "application/x-www-form-urlencoded",
          //         },
          //       }
          //     );
          //     if (ress.status == 200) {
          //       writetoken(ress.data.expires_in);
          //       window.localStorage.setItem("token", ress.data.access_token);
          //       window.localStorage.setItem(
          //         "refresh_token",
          //         ress.data.refresh_token
          //       );
          //       window.localStorage.setItem("tokentype", ress.data.token_type);
          //       window.localStorage.setItem("user", this.form.Username);
          //       this.$message.success(res.data.msg, "登录成功");
          //       this.$router.push({ path: "home" });
          //     }
          //   } else {
          //     console.log();
          //     this.$message.warning(res.data.msg);
          //   }
          // } catch (err) {
          //   console.log(err);
          // }

          // await getapi("/api/identity/users/login", {
          //   username: this.form.Username,
          //   password: this.form.Password,
          // }).then((ress) => {
          //   if (ress.data.code == 1 && ress.code == 1) {
          //     // console.log(msg);
          //     postapi(mm.apiurl + "/connect/token", {
          //       client_id: "Peis_App",
          //       grant_type: "password",
          //       username: this.form.Username,
          //       password: this.form.Password,
          //       scope: "Peis offline_access",
          //     }).then((res) => {
          //       console.log(res);

          //       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("tokentype", res.data.token_type);
          //       window.localStorage.setItem("user", this.form.Username);
          //       this.$message.success("登录成功");
          //       this.$router.push({ path: "home" });

          //       this.$store.state.changepassword = this.form.Password;
          //     });
          //   } else {
          //     this.$message.warning(res.data.msg);
          //   }
          // });

          // 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, "222222");

          //     if (res.status == 200) {
          //       //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" });
          //       // this.$store.dispatch('changepassword',this.form.Password)
          //       this.$store.state.changepassword = this.form.Password;
          //     } else {
          //       this.$message.warning("用户名或密码错误");
          //     }
          // });
        }
      });
    },
    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>