看不懂若依前端的登录代码

Question

这个是前端的登录按钮点了之后的代码，为什么看不到她调用login.js的登录接口啊？我想看看后端登录成功后返回的数据，前端是怎么存储处理的

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          // 设置 Cookie
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
            Cookies.set('tenantName', this.loginForm.tenantName, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
            Cookies.remove('tenantName');
          }
          // 发起登陆，这里就存了下 this.loginForm，跳转到首页，看不到访问接口的代码？
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            this.getCode();
          });
        }
      });
    },

Answer 1

若依前端用了Vuex进行状态管理，dispatch方法的第一个参数Login转发到了store/modules/user.js中的Login操作，如图

具体源码可以查看
https://gitee.com/y_project/R...

如果不熟悉Vuex可以参考文档：https://vuex.vuejs.org/zh/guide/

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

它是怎么调用接口的？

参考VueX文档：VueX

//在这里，通过 store.dispatch 用 VueX 异步分发了一个 action 向后台提交数据
 this.$store.dispatch("Login", this.loginForm).then(() => {
    this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
  }).catch(() => {
    this.loading = false;
    this.getCode();
  });
}

前端是怎么存储后端返回的数据的？

借用下楼下的图：

在 action 里面，使用commit('SET_TOKEN', tokenV)，提交 mutation 将状态存储到 store 里

它的 mutation 可能长这样：

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = xxxx 
    },
  },

可以参考这一篇：VueX - Mutation