使用 vue2 + element-ui 登录的时候的逻辑

1. 自动校验表单逻辑

  // 1. 自动表单验证
      try {
        // 这个形式自动表单验证麻烦
        // this.$refs.loginForm.validate((valid)=>{ ... });
        // 返回promise，如果失败则出错，程序不往下走
        // await this.$refs.loginForm.validate();
      } catch (error) {
        return console.log(error);
      }

 

2. 派发dispatch vuex 的  actions 执行异步请求获取token

3. 提交comutations 来保存 token 

vuex 全局保存 token 借助 js-cookies 来做 token 的持久化 ；

可以节流按钮 loding 

 

    async handleLogin() {
      // 1. 自动表单验证
      try {
        // 这个形式自动表单验证麻烦
        // this.$refs.loginForm.validate((valid)=>{ ... });
        // 返回promise，如果失败则出错，程序不往下走
        await this.$refs.loginForm.validate();
      } catch (error) {
        return console.log(error);
      }
      // 登录中
      /*******
       * 节流阀
       * 当返回数据的时候才会loading 为 true 登录按钮才可以被使用 否则一直处于加载状态
       */
      this.loading = true;
      // 派发获取 token 值
      try {
        // 2.发生登录请求
        await this.$store.dispatch("user/loginAction", this.loginForm);
        // 3.成功跳转页面
        this.$router.push("/");
      } catch (error) {
        console.log("登录失败", error);
      }
      // 登录结束
      this.loading = false;
    },