为什么promise会进入市场。那么（）当响应是错误时？-拉维尔

Question

我和vue在拉雷维尔做水疗。js、vuex和vue路由器。我在我的商店里做了一个登录操作，但是当我用无效的凭证登录时，一些非常奇怪的事情发生了。当我使用正确的凭据登录时，它可以正常工作。

所以它调试了以下内容

登录

应用程序。js:279帖子http://127.0.0.1:8000/api/auth/login401（未经授权）

应用程序。js:58018登录成功

app.js:58023登录失败

应用程序。js:43201未捕获（promise中）NavigationDuplicated{u name:“NavigationDuplicated”，name:“NavigationDuplicated”，消息：“不允许导航到当前位置（“/”），堆栈：“错误”↵ 在新的NavigationDuplicated(http://127.…)↵ 在http://127.0.0.1:8000/js/app.js:57159:12“}消息：“不允许导航到当前位置（“/”）名称：“NavigationDuplicated”_名称：“NavigationDuplicated”堆栈：“错误”↵ 在新的NavigationDuplicated(http://127.0.0.1:8000/js/app.js:43124:14)↵ 在HTML5历史上。确认转换(http://127.0.0.1:8000/js/app.js:43240:18)↵ 在HTML5历史上。过渡到(http://127.0.0.1:8000/js/app.js:43184:8)↵<在HTML5历史上。推(http://127.0.0.1:8000/js/app.js:43515:10)↵ 在http://127.0.0.1:8000/js/app.js:43929:22↵ 在新的promise（）↵ 在VueRouter。推(http://127.0.0.1:8000/js/app.js:43928:12)↵ 在http://127.0.0.1:8000/js/app.js:57159:12“proto:错误

对我来说，最疯狂的事情是，promise进入了现实。然后（）和控制台。记录“登录成功”？它永远不应该进监狱。那好吧？因为凭证是错误的，所以它应该只针对。catch（）。但更奇怪的是，它没有调试第二个控制台。在中记录（response.data）。然后呢？？？？此外，我不理解重复的导航。

凭证只是一个{username，password}。我使用的是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);
    }

这不是失败，因此它进入。然后打印401（未经授权）然后打印控制台。登录（“登录成功”），然后当它尝试调用上下文时。提交（“loginSucces”，response.data）；它失败了，将转到catch并说应用程序。js:58023登录失败。

只需在中询问即可解决此问题。然后

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);
         }
})