Question

我正在开发一个MERN应用程序，遇到了一个奇怪的问题，即在初始登录失败后，对服务器的任何请求（对服务器的请求）都需要对用户进行身份验证。具体来说，当我第一次打开浏览器并进入http://localhost:3000的登录页面时，系统会提示我登录。我会继续进行，然后重定向到/home。当我收到一条Unauthorized错误消息而不是预期的帖子列表时，在这里遇到了上述问题。显然，这是由于在安装HomePage组件时对服务器的所述列表请求失败而导致的，这需要对用户进行身份验证。以后所有需要身份验证的请求都会继续发生，并且只有在刷新浏览器（并因此自动登录，如下所示）之后，此问题才能得到解决。

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

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;

应用程序入口/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')
);

首次登录后，为什么要求身份验证的请求失败？

0 个答案: