我在React / Vue中执行相同的登录功能。 它在VueJS上工作正常,但是当我在ReactJS中使用时,它不起作用。

Vue工作正常:

async EnvioLogin() {
  try {
    const response = await axios.post("api/auth/login", {
      email: this.email,
      password: this.password,
    });
    localStorage.setItem("token", response.data.token);
    if (response.status == "200") {
      this.getUsers();
      console.log(response);
      this.$router.push("intermediorotas");
      this.showLogin = false;
    }
  } catch (error) {
    this.showError = true;
    setTimeout(() => {
      this.showError = false;
    }, 2000);
  }
},

},

反应不起作用:

    EnvioLogin = async () => {
        try {
          const response = await axios.post("api/auth/login", { email: this.state.email, password: this.state.password });
          localStorage.setItem("token", response.data.token);
          if (response.status === "200") {
            this.getUsers();
            console.log(response);
            this.props.history.push("/app");
          }
        } catch (error) {
          this.setState({ error: "User or Password wrong!" });
          setTimeout(() => {
            this.setState({ error: "" });
          }, 2000);
        }
      };

我在try {}和两个变量(电子邮件/密码)中都使用console.log,并且在两种情况下都到达了那里,并且在浏览器中没有错误出现。

    const response = await axios.post("api/auth/login", { email: this.state.email, password: this.state.password });
      localStorage.setItem("token", response.data.token);

getUsers vue:

  methods: {
    async getUsers() {
      const response = await axios.get("api/alunos", {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });

  console.log(response);
},

getUsers反应:

  componentDidMount() {
    this.getUsers()
  }

  getUsers = async () => {
    const response = await axios.get("api/alunos", {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    });

    console.log(response);
  };

===============>>#1 票数:1

我在React / Vue中执行相同的登录功能。 它在VueJS上工作正常,但是当我在ReactJS中使用时,它不起作用。

Vue工作正常:

async EnvioLogin() {
  try {
    const response = await axios.post("api/auth/login", {
      email: this.email,
      password: this.password,
    });
    localStorage.setItem("token", response.data.token);
    if (response.status == "200") {
      this.getUsers();
      console.log(response);
      this.$router.push("intermediorotas");
      this.showLogin = false;
    }
  } catch (error) {
    this.showError = true;
    setTimeout(() => {
      this.showError = false;
    }, 2000);
  }
},

},

反应不起作用:

    EnvioLogin = async () => {
        try {
          const response = await axios.post("api/auth/login", { email: this.state.email, password: this.state.password });
          localStorage.setItem("token", response.data.token);
          if (response.status === "200") {
            this.getUsers();
            console.log(response);
            this.props.history.push("/app");
          }
        } catch (error) {
          this.setState({ error: "User or Password wrong!" });
          setTimeout(() => {
            this.setState({ error: "" });
          }, 2000);
        }
      };

我在try {}和两个变量(电子邮件/密码)中都使用console.log,并且在两种情况下都到达了那里,并且在浏览器中没有错误出现。

    const response = await axios.post("api/auth/login", { email: this.state.email, password: this.state.password });
      localStorage.setItem("token", response.data.token);

getUsers vue:

  methods: {
    async getUsers() {
      const response = await axios.get("api/alunos", {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });

  console.log(response);
},

getUsers反应:

  componentDidMount() {
    this.getUsers()
  }

  getUsers = async () => {
    const response = await axios.get("api/alunos", {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    });

    console.log(response);
  };

  ask by GuilhermeSO translate from so

未解决问题?本站智能推荐:

2回复

如何让HTML模板定义与Vue相同的React组件?

在Vue中,您可以拥有类似的东西。 这将渲染所有已注册的组件,最终您将得到类似 使用React如何完成同一件事? 我尝试过类似的愚蠢的事情 总体目标是能够拥有常规的html模板,然后在需要的地方分散各种反应组件。 理想情况下,它应包含一个类似非渲染的组件,
1回复

React,Vue,Angular等,如何在整个应用程序中处理错误?

假设我有应用程序(不管前端有什么)。 后端只是API。 有很多页面/表格。 每个页面/表单都需要与API进行一些交互。 可能会出现许多错误: 在每种形式和每页中对这些错误进行代码处理都是很糟糕的(因为我们要通知用户出了点问题),因此必须在一个地方完成。 例如,在
2回复

在(Vue,React)中导出具有子模块的模块的最佳方法是什么[关闭]

使用index.js导出包含子模块的模块的最佳方法是什么。 很长一段时间以来,我都遵循一种模式,在我的项目(Vue或React)上命名和保存我的Web组件。 但是我想要一种更实用的方法来使用单个索引导出模块,以避免出现如下情况: 我的模式
2回复

Vue / Angular / React是否暴露? [关闭]

已关闭 。 这个问题需要细节或明确性。 它当前不接受答案。 了解更多 。 想改善这个问题吗
4回复

检查Webapp是否已安装React,Angular或Vue

当所有内容都经过最小化/压缩后,有没有一种简单的方法来查看应用程序正在使用哪些客户端库? 我正在查看从服务器传递给客户端的所有javascript,但是在压缩/缩小所有内容的情况下,我不一定能够确定是否使用了三种流行的客户端框架之一。 对于jQuery,它与在控制台中执行以下操作一样简单:
2回复

当React或Vue.js中的组件之间进行通信时,使用回调和事件有什么区别

就像标题所说,我对react或vuejs中的父子组件之间的通信感到困惑。 组件之间有两种不同的通信方式。 首先,我们可以将方法作为道具传递给子组件,然后子代可以通过该方法与父组件进行通信; 其次,我们还可以在子组件中调度事件,而父组件可以侦听该事件然后执行某些操作。
1回复

结构:放置导航栏组件(Vue / React)的位置

我对Vue或React(我正在使用Vue)等框架中的组件有一个快速问题: 我正在构建一个带有导航栏的相对简单的Web应用程序,该导航栏在所有页面上都可见 。 您将导航栏组件放在哪里? 在每一页上 ? 还是在加载所有子组件的主父页面上只有一次 ?
4回复

使用react或vue增强多页面应用程序的各个部分

我正在服务器端使用java & hibernate & spring mvc开发一个企业应用程序,并在客户端使用jquery (而不是SPA)。 现在在搜索页面中我使用ajax并仅获取json响应,但我不想在每个搜索或分页请求中写下面这样的内容。 我认为在此页面中使用带有react
1回复

如何在amp中转换react / vue.js事件

如果我的项目UI内容react/vue.js并且我想在添加所有amp-boilerplate之后创建amp页面。 它无法处理它给出如下错误的事件 属性“ v-on:click”可能不会出现在标签“ li”中。 属性“ v-show”可能不会出现在标签“ ul”中。 请让
1回复

可以在Vue.js / React中使用标准的JS库吗? [关闭]

关门了。 这个问题需要更加集中。 它当前不接受答案。 想要