title: Error 401 (Unauthorized) in React js in axios
body: <p>I am working on a notes website to clear my concepts of the react js. And now when i comes to
  user login in react js I am facing a problem.
  Actually when i enters the correct username and password then i doesn't get any error in console but as i enter wrong  i face error</p>
  <p><strong>this contians django-rest-framework as backend</strong></p>
  <p>My problem is this that how can i handle it in  console i don't want this error in console is this possible
  <a href="https://i.stack.imgur.com/tWK62.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWK62.png" alt="enter image description here" /></a></p>
  <p>Here i am sharing code</p>
  <pre><code>import reduxStore from &quot;../store&quot;;
  import axios from &quot;axios&quot;;
  import jwt_decode from &quot;jwt-decode&quot;;
  import {
      LOGIN_PAGE_ACTION_ERROR,
      USER_REFRESH_TOKEN,
      USER_STATUS_ACTION,
  } from &quot;../actions/index&quot;;
  
  import dayjs from &quot;dayjs&quot;;
  import { ChevronDoubleRightIcon } from &quot;@heroicons/react/solid&quot;;
  
  const baseURL = &quot;http://127.0.0.1:8000&quot;;
  
  const { dispatch } = reduxStore;
  
  const axiosInstance = axios.create({
      baseURL,
      headers: { &quot;Content-Type&quot;: &quot;application/json&quot; },
  });
  axiosInstance.interceptors.request.use(
      async (config) =&gt; {
          console.log(&quot;object&quot;);
          let AuthTokens = localStorage.getItem(&quot;AuthTokens&quot;)
              ? JSON.parse(localStorage.getItem(&quot;AuthTokens&quot;))
              : null;
          if (AuthTokens) {
              const user = jwt_decode(AuthTokens.access);
              const isExpired = dayjs.unix(user.exp).diff(dayjs()) &lt; 1;
              if (!isExpired) {
                  config.headers.Authorization = `Bearer ${AuthTokens.access}`;
                  dispatch(USER_STATUS_ACTION(true));
                  return config;
              }
              if (isExpired) {
                  const response = await axios
                      .post(`${baseURL}/api/token/refresh/`, {
                          refresh: AuthTokens.refresh,
                      })
                      .catch(function (error) {
                          dispatch(USER_STATUS_ACTION(false));
                      });
                  localStorage.setItem(
                      &quot;AuthTokens&quot;,
                      JSON.stringify(response.data)
                  );
                  dispatch(USER_STATUS_ACTION(true));
                  config.headers.Authorization = `Bearer ${response.data.access}`;
                  return config;
              }
          } else {
              dispatch(USER_STATUS_ACTION(false));
          }
          return config;
      },
      function (error) {
          return Promise.reject(error);
      }
  );
  
  axiosInstance.interceptors.response.use(
      (response) =&gt; {
          return response;
      },
      async function (error) {
          if (error.response.status === 401) {
              dispatch(LOGIN_PAGE_ACTION_ERROR(error.response.data));
              return error;
          }
          return error;
      }
  );
  export default axiosInstance;
  </code></pre>
  <p>Image from network tab
  <a href="https://i.stack.imgur.com/3ZYPL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3ZYPL.png" alt="enter image description here" /></a></p>