Почему обещание входит в .then (), если ответ является ошибкой? - Ларавел

Question

Я делаю SPA в Laravel с vue.js и vuex и vue router. Я сделал действие в своем магазине для регистрации, но когда я вхожу с неверными учетными данными, происходит что-то действительно странное. Он работает нормально, когда я вхожу с правильными учетными данными.

Таким образом, он отлаживает следующее

login

app.js: 279 POST http://127.0.0.1:8000/api/auth/login 401 (неавторизовано)

app.js: 58018 успехов входа

app.js: 58023 сбой входа в систему

app.js: 43201 Uncaught (в обещании) NavigationDuplicated {_name: «NavigationDuplicated», имя: «NavigationDuplicated», сообщение: «Переход к текущему местоположению (« / ») не разрешен», стек: «Ошибка» в новом NavigationDuplicated (http://127.…)↵ при http://127.0.0.1:8000/js/app.js:57159:12"})сообщение: «Навигация к текущему местоположению (« / ») недопустима» name: «NavigationDuplicated» _name: «NavigationDuplicated» стек: «Ошибка» в новом NavigationDuplicated (http://127.0.0.1:8000/js/app.js:43124:14)↵ в HTML5History.confirmTransition (*)1023 * в 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↵ в новом Promise () ↵ в 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 (). Но что еще более странно, это то, что он не выполняет отладку второго файла console.log (response.data) в .then () ???? Также я не понимаю Navigation Duplicated.

Учетные данные - это просто {имя пользователя, пароль}. Я использую 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 («имя входа успешно»), а затем при попытке вызвать 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);
         }
})