Axios GET Request doesnt like undefined header(x-auth-token) - node.js

Question

So I have a react app where the navbar component refuses to display after refreshing. The axios call to the endpoint doesnt appear to work if the header x-auth-token value is undefined.
I randomly set sethAuthtoken to a garbage value and it gives a 401 error, which makes sense, but if the localstorage.token has no value, I get nothing till it times out with the following message net::ERR_EMPTY_RESPONSE
This is action file, the navbar is referencing from:
Auth.js
import setAuthToken from '../utils/setAuthToken';
export const loadUser = () => async (dispatch) => { if
(localStorage.token) { setAuthToken(localStorage.token); }
const config = {
headers: {
"Content-Type": "application/json"
}
};
try {
const res = await axios.get("/api/auth", config);
dispatch({
type: USER_LOADED,
payload: res.data
});
} catch (err) {
dispatch({
type: AUTH_ERROR
});
}};
This is the back end route
router.get("/", auth, async (req, res) => {
try {
const user = await User.findById(req.user.id).select("-password");
res.json(user).status(200);
} catch (error) {
console.error(error.message);
res.status(500).send("Server error");
}});
This is the Navbar component code, which calls the action
import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logout } from "../../actions/auth";
const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
const authLinks = (
<ul>
<li>
<a onClick={logout} href="!#">
<i className="fas fa-sign-out-alt" />{" "}
<span className="hide-sm">Logout</span>
</a>
</li>
</ul>
);
const guestLinks = (
<ul>
<li>
Developers
</li>
<li>
<Link to="/register">Register</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
);//will load guestlinks if not authenticated, authlinks if authenticated
return (
<nav className="navbar bg-dark">
<h1>
<Link to="/">
<i className="fas fa-code"></i> DevConnector
</Link>
</h1>
{loading ? null : (
<Fragment> {isAuthenticated ? authLinks : guestLinks} </Fragment>
)}
</nav>
);
};
Navbar.propTypes = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(
mapStateToProps,
{ logout }
)(Navbar);

Answer 1

I just put an else statement in the auth action file for it dispatch the AUTH_ERROR to the reducer, when theres no token in localstorage.
export const loadUser = () => async dispatch => {
if (localStorage.token) {
setAuthToken(localStorage.token);
} else {
dispatch({
type: AUTH_ERROR
});
}