Javascript 为什么我的请求在初次登录后要求身份验证失败？

我正在开发一个MERN应用程序，遇到了一个奇怪的问题，即任何对资源的请求（到服务器）都需要在初始登录失败后对用户进行身份验证。具体来说，我第一次打开浏览器并进入

http://localhost:3000

，系统会提示我登录。我及时继续，然后被重定向到

/home

。就是在这里，我遇到了上述问题，因为我收到了

未经授权的
错误消息，而不是预期的帖子列表。显然，这是由于在装载
主页
组件时向服务器请求所述列表失败，这需要对用户进行身份验证。这会持续发生在任何需要身份验证的后续请求上，只有在我刷新浏览器（从而自动登录，如下所示）之后，此问题才能得到解决

我正在将身份验证令牌（如果存在）附加到所有请求，如下面的
axios
requests配置中所示。那么，有什么好处呢

Axios配置

import axios from 'axios';

function requestWithAuthTokenSetToHeaders() {
  const token = localStorage.getItem('token');

  const defaultOptions = {
    headers: {
      Authorization: token && `Bearer ${token}`,
    },
  };

  return {
    get: (url, otherOptions = {}) =>
      axios.get(url, { ...defaultOptions, ...otherOptions }),
    post: (url, data, otherOptions = {}) =>
      axios.post(url, data, { ...defaultOptions, ...otherOptions }),
    put: (url, data, otherOptions = {}) =>
      axios.put(url, data, { ...defaultOptions, ...otherOptions }),
    patch: (url, data, otherOptions = {}) =>
      axios.patch(url, data, { ...defaultOptions, ...otherOptions }),
    delete: (url, otherOptions = {}) =>
      axios.delete(url, { ...defaultOptions, ...otherOptions }),
  };
}

export default requestWithAuthTokenSetToHeaders;

App entry/index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import configureStore from './store';
import { LOGIN_SUCCESS } from './store/auth/types';
import {
  FETCH_CURRENT_USER_SUCCESS,
  FETCH_CURRENT_USER_FAILURE,
} from './store/users/types';

import App from './components/App';
import Spinner from './components/shared/spinner';

import { requestWithAuthTokenSetToHeaders } from './utils';

import * as serviceWorker from './serviceWorker';

const { store, persistor } = configureStore();

const request = requestWithAuthTokenSetToHeaders();

// Get authenticated user's info
async function getUserInfo(token) {
  try {
    const {
      data: { user },
    } = await request.get(`/users/me`);

    localStorage.setItem('current-user', JSON.stringify(user));

    if (user) {
      store.dispatch({
        type: FETCH_CURRENT_USER_SUCCESS,
        payload: user,
      });
    }
  } catch (error) {
    store.dispatch({
      type: FETCH_CURRENT_USER_FAILURE,
      payload: error,
    });
  }
}

// Auto login to account
async function autoLogin() {
  const token = localStorage.getItem('token');

  if (token) {
    store.dispatch({
      type: LOGIN_SUCCESS,
    });

    getUserInfo(token);
  }
}

autoLogin();

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={<Spinner />} persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从'react redux'导入{Provider}；
从'redux persist/integration/react'导入{PersistGate}；
从“/store”导入配置存储；
从“./store/auth/types”导入{LOGIN_SUCCESS}；
进口{
获取\u当前用户\u成功，
获取当前用户失败，
}来自“./store/users/types”；
从“./components/App”导入应用程序；
从“./components/shared/Spinner”导入微调器；
从“/utils”导入{requestWithAuthTokenSetToHeaders}；
将*作为serviceWorker从“/serviceWorker”导入；
const{store，persistor}=configureStore（）；
const request=requestWithAuthTokenSetToHeaders（）；
//获取经过身份验证的用户信息
异步函数getUserInfo（令牌）{
试一试{
常数{
数据：{user}，
}=等待请求。获取（`/users/me`）；
localStorage.setItem（'current-user'，JSON.stringify（user））；
如果（用户）{
仓库调度({
类型：获取\当前\用户\成功，
有效载荷：用户，
});
}
}捕获（错误）{
仓库调度({
类型：获取\当前\用户\失败，
有效载荷：错误，
});
}
}
//自动登录帐户
异步函数autoLogin（）{
const token=localStorage.getItem（'token'）；
如果（令牌）{
仓库调度({
类型：登录成功，
});
getUserInfo（令牌）；
}
}
自体蛋白（）；
ReactDOM.render(
,
document.getElementById（'root'））
);
我确信您的令牌没有到达后端，因此未经授权。我建议你在线搜索如何在axios上使用拦截器，看看它是否解决了你的问题。你看到请求中发送的auth头了吗？（网络标签）@JonathanAkweteyOkine这正是发生的事情。无论出于何种原因，令牌都不会第一次附加/发送到后端。谢谢你的建议。我会马上查的。