登录验证登出

王旭

2022-10-10 083b17d07939af29bcb04a27e564664c7280595a

 src/components/login.vue

@@ -78,9 +78,9 @@
        ref="loginForm"
        class="loginForm"
      >
        <el-form-item prop="userName">
        <el-form-item prop="uid">
          <el-input
            v-model="loginForm.userName"
            v-model="loginForm.uid"
            placeholder="输入您的账号或手机号"
            class="nobr"
            size="meddle"
@@ -90,10 +90,10 @@
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
        <el-form-item prop="pwd">
          <el-input
            show-password
            v-model="loginForm.password"
            v-model="loginForm.pwd"
            placeholder="输入您的密码"
            class="nobr"
            autocomplete="off"
@@ -141,6 +141,7 @@
              background: #3b4d6e;
              border-radius: 5px;
            "
            :loading="loading"
            @click="submitForm('loginForm')"
            >登录</el-button
          >
@@ -153,6 +154,7 @@
<script>
// import { login } from '../utils/api'
import validCode from "./verificationCode.vue";
import { mapActions } from "vuex";

export default {
  components: { validCode },
@@ -185,33 +187,24 @@

    return {
      validCode: "",

      loading: false,
      loginForm: {
        userName: "admin",
        password: "terra2022",
        uid: "admin",
        pwd: "Admin@123",
      },
      rules: {
        userName: [{ validator: validUserName, trigger: "blur" }],
        password: [{ validator: validPassword, trigger: "blur" }],
        uid: [{ validator: validUserName, trigger: "blur" }],
        pwd: [{ validator: validPassword, trigger: "blur" }],
        validCode: [{ validator: checkValidCode, trigger: "blur" }],
      },
    };
    // return {
    //   validCode: "",
    //   form: {
    //     username: "",
    //     password: "",
    //   },
    //   rules: {
    //     username: [
    //       { required: true, message: "请输入用户名", trigger: "blur" },
    //     ],
    //     password: [{ required: true, message: "请填写密码", trigger: "blur" }],
    //   },
    // };
  },
  mounted() {},
  mounted() {
    this.getpublickey();
  },
  methods: {
    //   获取vuex中Actions里的方法
    ...mapActions(["login", "getpublickey"]),
    getCode(data) {
      console.log(data);
      this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
@@ -219,8 +212,17 @@
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //调用录接口
          this.$router.push("/catalogueManage");
          this.loading = true;
          this.login(this.loginForm)
            .then(response => {
             this.$router.push("/")
              
              this.loading = false;
              //调用录接口
            })
            .catch(response => {
              this.loading = false;
            });
          //如果登录失败，需要刷新验证码的
          this.$refs.refresh.createdCode();
          this.validCode = ""; //清空验证码输入框的内容
@@ -230,16 +232,8 @@
        }
      });
    },
    // onSubmit() {
    //   this.$refs.form.validate((valid) => {
    //     if (valid) {
    //       this.$router.push("/Home");
    //     } else {
    //       return false;
    //     }
    //   });
    // },
  },
  created() {},
};
</script>