邏輯不工作後。然後

我有一個登錄結束點，迴應我一個JSON。我使用VUE路由器做一個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>

這就像後。然後作品什麼？

返回的JSON纔出現在屏幕上。

來源

2017-08-18 Igor Martins

我們可以在'＃login'中看到模板嗎？ – Bert

@Bert完成！ 321 –

它看起來像你想'if（response.body.message.success === true）'。 – Bert

就在你的錯誤回調

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

這是第一步，因爲也許你只是在這裏輸入的添加console.error ..

來源

2017-08-18 19:01:01 nodeover

console.log（response）;給我什麼......它像代碼沒有得到有...忽略'then' –

坎啊，也許一個想法，只是改變這 getLogin：功能（E）{ 對此 getLogin ：（e）=> { 因爲你在引用中使用這個而不是全局範圍，所以你可能必須綁定你這個。 – nodeover

我想到的問題是，登錄按鈕是一個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"。

來源

2017-08-18 19:18:57 Bert

邏輯不工作後。然後

回答

相關問題