Cant catch axios error in promise, response works fine-CodePudding

I am trying to catch an error whilst the user tries to access a page without an authentication token.

axios.js?v=012beb2f:840          POST http://localhost:3001/api/get-user 422 (Unprocessable Entity)

Uncaught (in promise) AxiosError {message: 'Request failed with status code 422', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

router.beforeEach((to, from, next) => {
  const store = useUserStore()
  if(to.meta.requiresAuth)
  {
    try
    {
      const response = axios.post('/api/get-user', {}, {
        headers: {
          Authorization: `Bearer ${store.user.token}`
        }
      })
      .then(response => {
        console.log(response)
        next()
      })
    }
    catch(error)
    {
      console.log(error)
      next('/login')
    }
  }
  else 
  {
    next()
  }
})

Thats the code that makes the request to the server. If the token is correct it works fine. However incorrect token throws the error mentioned above. I would like it to redirect to /login page if token is incorrect.

This is the code on server side.

router.post('/get-user', signupValidation, (req, res, next) => {


    if(
        !req.headers.authorization ||
        !req.headers.authorization.startsWith('Bearer') ||
        !req.headers.authorization.split(' ')[1]
    ){
        return res.status(422).json({
            message: "Please provide the token",
        });
    }

    const theToken = req.headers.authorization.split(' ')[1];
    const decoded = jwt.verify(theToken, 'the-super-strong-secrect');

    db.query('SELECT * FROM users where id=?', decoded.id, function (error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results[0], message: 'Fetch Successfully.' });
    });


});

CodePudding user response：

Change the synchronous try/catch...

try
{
  somePromise.then(...)
}
catch(error)
{
  console.log(error)
  next('/login')
}

...to instead use the catch() provided by the promise:

const headers = { Authorization: `Bearer ${store.user.token}` };
axios.post('/api/get-user', {}, { headers })
.then(response => {
  console.log(response)
  next()
})
.catch(error => {
  console.log(error)
  next('/login')
}}

Note, also, that the OP code incorrectly assigned the axios.post promise to an unused variable called "response".

Alternatively, use the synchronous try/catch style with async/await:

router.beforeEach(async (to, from, next) => {
  const store = useUserStore()
  if(to.meta.requiresAuth)
  {
    try
    {
      const headers = { Authorization: `Bearer ${store.user.token}` };
      const response = await axios.post('/api/get-user', {}, { headers });
      console.log(response);
      next();
    }
    catch(error)
    {
      console.log(error)
      next('/login')
    }
  }
  else 
  {
    next()
  }
})