title: Why does promise go into the .then() when the response is an error? - Laravel
body: <p>I am making a SPA in Laravel with vue.js and vuex and vue router. I made an action in my store for logging, but when I log in with invalid credentials something really strange happens. It works fine when I log in with the right credentials.</p>
  
  <p>So it debugs the following</p>
  
  <blockquote>
    <p>login</p>
    
    <p>app.js:279 POST <a href="http://127.0.0.1:8000/api/auth/login" rel="nofollow noreferrer">http://127.0.0.1:8000/api/auth/login</a> 401
    (Unauthorized)</p>
    
    <p>app.js:58018 login succes</p>
    
    <p>app.js:58023 login failed</p>
    
    <p>app.js:43201 Uncaught (in promise)  NavigationDuplicated {_name:
    "NavigationDuplicated", name: "NavigationDuplicated", message:
    "Navigating to current location ("/") is not allowed", stack: "Error↵ 
    at new NavigationDuplicated (<a href="http://127" rel="nofollow noreferrer">http://127</a>.…)↵    at
    <a href="http://127.0.0.1:8000/js/app.js:57159:12" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:57159:12</a>"} message: "Navigating to
    current location ("/") is not allowed" name: "NavigationDuplicated"
    _name: "NavigationDuplicated" stack: "Error↵    at new NavigationDuplicated (<a href="http://127.0.0.1:8000/js/app.js:43124:14" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:43124:14</a>)↵    at
    HTML5History.confirmTransition
    (<a href="http://127.0.0.1:8000/js/app.js:43240:18" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:43240:18</a>)↵    at
    HTML5History.transitionTo (<a href="http://127.0.0.1:8000/js/app.js:43184:8" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:43184:8</a>)↵<br>
    at HTML5History.push (<a href="http://127.0.0.1:8000/js/app.js:43515:10" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:43515:10</a>)↵    at
    <a href="http://127.0.0.1:8000/js/app.js:43929:22" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:43929:22</a>↵    at new Promise
    ()↵    at VueRouter.push
    (<a href="http://127.0.0.1:8000/js/app.js:43928:12" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:43928:12</a>)↵    at
    <a href="http://127.0.0.1:8000/js/app.js:57159:12" rel="nofollow noreferrer">http://127.0.0.1:8000/js/app.js:57159:12</a>"
    <strong>proto</strong>: Error</p>
  </blockquote>
  
  <p>The thing that is crazy to me is that the promise goes into the .then() and console.logs "login succes"? It shouldn't ever get in the .then() right? Because the credentials are wrong, so it should just go for the .catch(). But what is even more strange is that it does nog debug the second console.log(response.data) in the .then()???? Also I do not understand the Navigation Duplicated.</p>
  
  <p>Credentials is just an {username, password}. I am using JWT and the /login route leads to the standard jwt authcontroller login method.</p>
  
  <p><strong>Login.vue component method</strong></p>
  
  <pre><code>methods: {
      login() {
          this.$store
              .dispatch("tryLogin", this.form)
              .then(response =&gt; {
                  this.$router.push({ path: "/home" });
              })
              .catch(error =&gt; {
                  this.logginError = error;
              });
      }
  }
  </code></pre>
  
  <p><strong>Store action</strong></p>
  
  <pre><code>tryLogin(context, credentials) {
      context.commit("login");
      console.log("login");
      return new Promise((resolve, reject) =&gt; {
          axios
              .post("/api/auth/login", credentials)
              .then(response =&gt; {
                  console.log("login succes");
                  console.log(response.data);
                  context.commit("loginSucces", response.data);
                  resolve(response.data);
              })
              .catch(error =&gt; {
                  console.log("login failed");
                  context.commit("loginFailed", error);
                  reject(error);
              });
      });
  }
  </code></pre>
  
  <p><strong>AuthController login function</strong></p>
  
  <pre><code>/**
   * Get a JWT via given credentials.
   *
   * @return \Illuminate\Http\JsonResponse
   */
  public function login()
  {
      $credentials = request(['email', 'password']);
  
      if (!$token = auth('api')-&gt;attempt($credentials)) {
          return response()-&gt;json(['error' =&gt; 'Unauthorized'], 401);
      }
  
      return $this-&gt;respondWithToken($token);
  }
  </code></pre>