Блог

Я работаю над приложением MERN и сталкиваюсь с этой странной проблемой, при которой любой запрос (к серверу) на ресурс, требующий аутентификации пользователя после первоначального входа в систему, завершается неудачей. В частности, при первом открытии браузера и переходе на целевую страницу в http://localhost:3000 мне предлагается войти в систему. Я должным образом продолжаю, а затем перенаправляюсь на /home . Именно здесь я сталкиваюсь с указанной проблемой, поскольку получаю Unauthorized сообщение об ошибке, а не ожидаемый список сообщений. Очевидно, что это из-за неудачного запроса a на сервер для указанного списка при монтировании HomePage компонента, для которого требуется аутентификация пользователя. Это продолжает происходить с любыми последующими запросами, требующими проверки подлинности, и только после обновления браузера (и, следовательно, автоматического входа в систему, как показано ниже) эта проблема решается.

Я прикрепляю токен аутентификации (если он присутствует) ко всем запросам, как показано в axios конфигурации запросов ниже. Итак, что дает?

Конфигурация Axios

 import axios from 'axios';

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

  const defaultOptions = {
    headers: {
      Authorization: token amp;amp; `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;
  

Приложение 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')
);