Блог

У меня есть приложение react, которое использует сеансы с экспресс-сервером с использованием REST API. В моем хранилище Redux (на интерфейсе) Я сохраняю «isLoggedIn» в состоянии redux. На основе этого свойства я показываю либо страницу входа, либо домашнюю страницу. Теперь, когда я открываю веб-сайт, начальное состояние redux «isLoggedIn» равно false, поэтому вопрос в том, как мне проверить, действительно ли пользователь вошел в систему. Я подумываю об отправке запроса на конечную точку для получения нужных мне данных на домашней странице, и если пользователь не вошел в систему, я бы получил ответ 401, а затем показал страницу входа. Это правильный подход?

Прежде чем я расскажу, как вы могли бы сохранить свое состояние redux, я бы посоветовал (обратите внимание, что это личное мнение)

1. Просмотр кода котельной для его настройки действительно излишне длинный

2. Лучшим выходом для этого является использование экспресс-сеанса, при котором файл cookie сохраняется до тех пор, пока вы его предоставляете, например, если вы установили значение cookie равным 3 дням, он останется на 3 дня

3. Я так считаю, что это отраслевой стандарт, работающий с файлом cookie HttpOnly для обработки сеанса, поскольку это безопасно, избегая XSS-атак и CSRF-атак

В любом случае ниже приведено ваше решение для сохранения хранилища Redux

Итак, при сохранении вашего состояния redux вы можете посмотреть на что-то вроде этого

1. Сначала запустите npm install redux-persist или yarn add redux-persist

Теперь пришло время создать свой магазин redux

Итак, теперь, когда вы создаете свой магазин redux с помощью createStore, вы хотите передать свою функцию persistReducer createStore После создания вашего магазина, передайте его функции persistStore, которая гарантирует, что ваше состояние redux сохраняется

 import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import rootReducer from './reducers'; 
//Import above comes from a file **reducers** which has the combineReducers
// basically based on this code snippet
// I have my combineReducer object in another folder hope that it 
//makes sense. Avoided to write it here to keep code short to show 
//more of setup in  store persisiting

const persistStoreConfigs = {
 key: 'root',
 storage: myAppStorage,
 stateReconciler: autoMergeLevel2 
};

const persistantReducer = persistReducer(persistStoreConfigs, rootReducer);

export const store = createStore(persistantReducer);
export const persistor = persistStore(store);
  

 import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';

// This are coming from the store code above that we made 
import { persistor, store } from './store';
// This are basically your Custom Componentd
import { HomePage, LoadingView } from './components';

const App = () => {
  return (
    <Provider store={store}>
      // the loading and persistor props are both required!
      // Noting that the LoadingView is a custom component
      // But the persistor isn't
      //The main aim of this two props is to delay the rendering of your app UI until the persited state is retrieved hence the loading screen component
      <PersistGate loading={<LoadingView />} persistor={persistor}>
        <HomePage />
      </PersistGate>
    </Provider>
  );
};

export default App;