Vue项目 提交登录表单2.0 Loading动画 + aes.js + token + vuex存个人信息 + 时间戳（结束时间-当前时间）

<!-- 搜索、购物车、登录注册 -->
        <div class="searBuyLogin">
          <!--头部搜索框-->
          <div class="content-login-success" v-if="isLogin">
            <div style="cursor: pointer">我的课程</div>
            <div
              @mouseenter="isUserInfo = true"
              @mouseleave="isUserInfo = false"
            >
              <!-- 用户头像 -->
              <img
                class="avator"
                :src="userInfo.avatar"
                alt=""
                v-if="userInfo.avatar"
              />
              <!-- 默认头像 -->
              <img class="avator" :src="avatarImg" alt="" v-else />
              <!-- 头像信息 -->
            </div>
          </div>
          <div class="content-login" @click="goLogin" v-else>登录 / 注册</div>
        </div>
        <!-- 划过头像显示  -->
        <div class="user-info" v-show="isUserInfo">
          <div class="user-info-top">
            <div class="u-i-t-top">
              <img
                class="avator"
                :src="userInfo.avatar"
                alt=""
                v-if="userInfo.avatar"
              />
              <img class="avator" :src="avatarImg" alt="" v-else />
              <div class="avator-info">
                <p>{{ userInfo.nickName ? userInfo.nickName : nickname }}</p>
              </div>
              <div class="vip" v-if="vipInfo">
                <div class="vipImg">
                  <img
                    :src="vipInfo.vipIcon"
                    :class="vipTime < 0 ? 'gray' : ''"
                  />
                </div>
                <div class="vipName">{{ vipInfo.vipName }}</div>
                <div class="endTime" v-if="vipInfo.isExpired === 0">
                  {{ vipTime }}天到期
                </div>
                <div class="endTime" v-else>
                  已过期{{ Math.abs(vipTime) }}天
                </div>
              </div>
            </div>
          </div>
          <div class="user-info-bottom">
            <div class="logout">退出登录</div>
          </div>
        </div> 

<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";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      loginDialog: false,
      isregister: false,
      loginCurrent: 0, //账号登录、验证码登录
      // 账号密码
      phoneForm: {
        username: "",
        password: "",
        rememberMe: false,
      },
isLogin: false,
      vipInfo: {}, //用户会员信息
      vipTime: "", //会员还剩多少天结束
      avatarImg: "/image/common/avator.png",
      nickname: "无",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  created() {
    //调用获取用户信息的方法
    this.getUserInfo();
  },
  methods: {
    ...mapActions(["saveUserInfoAction"]),
    //账号密码登录 按钮
    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.isLogin = true;
              //调用获取用户信息的方法
              this.getUserInfo();
              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",
            });
          });
      });
    },
    //获取用户的个人信息
    getUserInfo(params) {
      api.createToken().then((res) => {
        console.log("createToken", res);
        if (res.meta.code === "200") {
          api
            .getInfo({ token: res.data.token })
            .then((res) => {
              if (res.meta.code === "200") {
                this.vipInfo = res.data.data.vipInfo; //拿到vip信息
                if (this.vipInfo) {
                  var now = new Date().getTime();
                  //console.log(now);
                  var num = this.vipInfo.endTime - now;
                  this.vipTime = Math.floor(num / 1000 / 60 / 60 / 24); //会员还剩多少天结束
                }
                //console.log(this.vipTime);
                //console.log(res.data.data);
                this.saveUserInfoAction(res.data.data); //用户信息赋值给 vuex的userInfo
              } else {
                this.$message({
                  message: res.meta.msg,
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
};
</script>

modules/user.js

export default {
  state: {
    userInfo: {
      avatar: '/image/common/avator.png',
      nickName: '默认昵称',
      gender: 1,
      city: '成都',
      id: 1
    }
  },
  getters: {

  },
  mutations: {
    saveUserInfo(state, payLoad) {
      state.userInfo = payLoad
    }
  },
  actions: {
    saveUserInfoAction({ commit }, payLoad) {
      commit('saveUserInfo', payLoad)
    }
  }
}

common/api/auth.js

import { Decrypt } from '../../utils/aes'
import request from './request'

export default {
  //账号密码登录
  loginByJson(params) {
    return request({
      url: '/api/u/loginByJson',
      method: 'post',
      data: params
    })
  },
  //获取token
  createToken() {
    return request({
      url: '/api/token/createToken',
      method: 'post'
    })
  },
  //获取个人信息
  getInfo({ token }) {
    return request({
      url: '/api/member/getInfo?token=' + token,
      method: 'get',
      headers: {
        'Authorization': Decrypt(localStorage.getItem('token'))
      }
    })
  }
}