Vue项目 提交登录表单2.0 Loading动画 + aes.js + token

 <el-form
                  :model="phoneForm"
                  ref="phoneFormRef"
                  class="demo-ruleForm"
                >
                  <el-form-item prop="username" class="captcha">
                    <el-input
                      v-model="phoneForm.username"
                      placeholder="请输入用户名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="password" class="captcha identify">
                    <el-input
                      v-model="phoneForm.password"
                      placeholder="请输入密码"
                      show-password
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      class="regiterBtn"
                      @click="submitPhoneForm('phoneFormRef')"
                      >立即登录</el-button
                    >
                  </el-form-item>
                  <div></div>
                </el-form>

<script>
import { Loading } from "element-ui";
import { Encrypt } from "@/utils/aes.js";
import api from "../../common/api/auth";
export default {
  data() {
    return {
      loginDialog: false,
      isregister: false,
      loginCurrent: 0, //账号登录、验证码登录
      // 账号密码
      phoneForm: {
        username: "",
        password: "",
        rememberMe: false,
      },
    };
  },
  computed: {
    //
  },
  watch: {
  },
  methods: {
    //账号密码登录 按钮
    submitPhoneForm(phoneFormRef) {
      this.$refs[phoneFormRef].validate((valid) => {
        if (!valid) return; //验证通过否
        if (valid) {
          //开启加载动画
          var phoneLoading = Loading.service({
            lock: true,
            text: "loading",
            spinner: "el-icon-loading",
            background: "rgba(0,0,0,0.7)",
          });
        }
        let username = Encrypt(this.phoneForm.username);
        let password = Encrypt(this.phoneForm.password);
        api
          .loginByJson({
            username,
            password,
          })
          .then((res) => {
            console.log(res);
            if (res.meta.code === "10006") {
              //10006为登录成功
              let accessToken = res.data.accessToken;
              localStorage.setItem("token", Encrypt(accessToken));
              this.$message({
                message: "登录成功，请去学习！",
                type: "success",
              });
              this.$router.go(0); //刷新当前页面
            } else {
              this.$message({
                message: res.meta.msg,
                type: "error",
              });
            }
            //关闭加载动画
            phoneLoading.close();
            this.loginDialog = false;
          })
          .catch((err) => {
            phoneLoading.close();
            this.$message({
              message: res.meta.msg,
              type: "error",
            });
          });
      });
    },
  },
};
</script>

common/api/auth.js

import request from './request'

export default {
  //账号密码登录s
  loginByJson(params) {
    return request({
      url: '/api/u/loginByJson',
      method: 'post',
      data: params
    })
  }
}