Question

我有一个登录终点，回复我一个json。我正在使用vue-router进行POST，然后在localStorage中存储令牌，但在POST之后，json会在屏幕上显示：

{"success":false,"message":"Login ou senha inválidos!"}

它应该在页面登录时使用消息

返回

这是代码：

var vmLogin = new Vue({
el: '#login',
data: {
email: '',
msg: '',
password: ''
},
beforeCreate: function () {
 if(localStorage.getItem("timeTaskToken") !== null) {
  window.location.href = '/'
}
},
methods: {
getLogin: function (e) {

  this.$http.post('/login', {email: this.email, password: this.password}).then((response) => {
    alert('teste!');
    if(response.body.success === true) {

      localStorage.setItem("timeTaskToken", response.body.token);
      window.location.href = '/'
    } else {
        this.msg = response.body.message
    }


  }, (response) => {
    // error callback
  });
  e.preventDefault();
}
}
});

登录页面

<form id="login" class="form-horizontal" method="post">
 <h3>{{ msg }}</h3>
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 <div class="col-sm-10">
  <input type="email" v-model="email" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
  <input type="password" v-model="password" class="form-control" name="password"  placeholder="Password">
</div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
</div>
</div>
<div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default" @click="getLogin">Sign 
  in</button>
  </div>
  </div>
  </form>

在 .then 之后没什么用......

返回的JSON只会出现在屏幕上。

Answer 1

我预计问题是“登录”按钮是submit按钮，您只希望它是button按钮。

更改

<button type="submit" class="btn btn-default" @click="getLogin">Sign in</button>

要

<button type="button" class="btn btn-default" @click="getLogin">Sign in</button>

请注意type="button"。

如果将其保留为submit类型，则表单实际上已发布，代码执行将停止。这也解释了为什么你看到一个只有JSON结果的页面;这只是发布该表单的回复。

或者，将e.preventDefault()移到方法的顶部。

您也可以使用@click.prevent="getLogin"。

Answer 2

只需在错误回调中添加console.error

}, (response) => {
    console.error(response);
  });

这是第一步，因为你可能只是进入这里..

在.then之后逻辑不起作用

2 个答案: