当响应是错误时，为什么承诺会进入 .then() ？ - 拉拉维尔

Question

我正在使用 vue.js 和 vuex 和 vue 路由器在 Laravel 中制作 SPA。我在我的商店中进行了登录操作，但是当我使用无效凭据登录时，会发生一些非常奇怪的事情。当我使用正确的凭据登录时，它工作正常。

所以它调试以下内容

登录

app.js:279 发布http://127.0.0.1:8000/api/auth/login 401 （未经授权）

app.js:58018 登录成功

app.js:58023 登录失败

app.js:43201 未捕获（承诺） NavigationDuplicated {_name: “NavigationDuplicated”，名称：“NavigationDuplicated”，消息： “不允许导航到当前位置（“/”）”，堆栈：“错误↵ 在新的 NavigationDuplicated (http://127....)↵ 在 http://127.0.0.1:8000/js/app.js:57159:12"} 消息：“导航到 当前位置（“/”）不允许”名称：“NavigationDuplicated” _name：“NavigationDuplicated”堆栈：“错误↵ at new NavigationDuplicated (http://127.0.0.1:8000/js/app.js:43124:14)↵ at HTML5History.confirmTransition (http://127.0.0.1:8000/js/app.js:43240:18)↵ 在 HTML5History.transitionTo (http://127.0.0.1:8000/js/app.js:43184:8)↵
在 HTML5History.push (http://127.0.0.1:8000/js/app.js:43515:10)↵ 在 http://127.0.0.1:8000/js/app.js:43929:22↵ 在新的承诺 ()↵ 在 VueRouter.push (http://127.0.0.1:8000/js/app.js:43928:12)↵ 在 http://127.0.0.1:8000/js/app.js:57159:12" 原型：错误

对我来说疯狂的是承诺进入 .then() 和 console.logs “登录成功”？它不应该进入 .then() 对吗？因为凭证是错误的，所以它应该只用于 .catch()。但更奇怪的是它确实调试了.then()中的第二个console.log(response.data)????我也不明白导航重复。

凭据只是一个{用户名，密码}。我正在使用 JWT，并且 /login 路由指向标准的 jwt authcontroller 登录方法。

Login.vue 组件方法

methods: {
    login() {
        this.$store
            .dispatch("tryLogin", this.form)
            .then(response => {
                this.$router.push({ path: "/home" });
            })
            .catch(error => {
                this.logginError = error;
            });
    }
}

商店操作

tryLogin(context, credentials) {
    context.commit("login");
    console.log("login");
    return new Promise((resolve, reject) => {
        axios
            .post("/api/auth/login", credentials)
            .then(response => {
                console.log("login succes");
                console.log(response.data);
                context.commit("loginSucces", response.data);
                resolve(response.data);
            })
            .catch(error => {
                console.log("login failed");
                context.commit("loginFailed", error);
                reject(error);
            });
    });
}

AuthController登录功能

/**
 * Get a JWT via given credentials.
 *
 * @return \Illuminate\Http\JsonResponse
 */
public function login()
{
    $credentials = request(['email', 'password']);

    if (!$token = auth('api')->attempt($credentials)) {
        return response()->json(['error' => 'Unauthorized'], 401);
    }

    return $this->respondWithToken($token);
}

Answer 1

好的，我会尝试解释（对不起我的英语）以下工作正常，当您使用错误的凭据登录时，它将返回一个很好的 JSON 响应：

 if (!$token = auth('api')->attempt($credentials)) {
        return response()->json(['error' => 'Unauthorized'], 401);
    }

这不是失败，因此它进入.then并打印401 (Unauthorized) 然后它打印 console.log("login succes") ，然后当它尝试调用 context.commit("loginSucces", response.data);它失败了，然后会说app.js:58023登录失败。

您可以在.then 中询问来解决此问题

axios
    .post("/api/auth/login", credentials)
    .then(response => {
         if (response.data.status === "error") {
             console.log(response.data);
         }
         else{
             context.commit("loginSucces", response.data);
             resolve(response.data);
         }
})