React-Redux аутентификация с помощью JWT

Question

Я пытаюсь создать систему входа в систему для своего приложения React. Я использую React, Redux, Redux-Thunk и React Router. После входа я сохраняю JWT в localalstorage.

Проблема в том, что я не могу найти хороший способ "повторно аутентифицировать" пользователя после возвращения на веб-сайт. Было бы хорошим местом для вызова создателя действия для получения пользовательских данных? Сейчас я просто проверяю, есть ли токен в локальном хранилище, и меняю значение в моем редукторе. Но где бы вы реализовали logi c для получения профиля пользователя? Вот мой основной компонент прилагается.

import React from 'react'
import MainCallPage from './MainCallPage'
import LoginPage from './LoginPage'
import HeaderComponent from './HeaderComponent'
import MainPage from './MainPage'
import PrivateRoute from './PrivateRoute'
import { Router, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from '../reducers'
import thunkMiddleware from 'redux-thunk'
import { history } from '../helpers/history'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunkMiddleware))
)

const token = localStorage.getItem('token')
if (token) {
  store.dispatch({ type: 'AUTH_USER' })
}

const App = () => {
  return (
    <Provider store={store}>
      <Router history={history}>
        <HeaderComponent />
        <PrivateRoute path="/dashboard" component={MainCallPage}></PrivateRoute>
        <Route path="/login" component={LoginPage} />
        <Route path="/" component={MainPage} exact />
      </Router>
    </Provider>
  )
}

export default App

Answer 1

Я не думаю, что есть какие-либо проблемы с текущим подходом, но так как вы используете функциональный компонент, я бы порекомендовал вам использовать useEffect ловушку и проверить, присутствует ли token в localStorage, и если если вы хотите получить данные пользователя

import React,{useEffect} from "react";

useEffect(() => {
  const token = localStorage.getItem('token')
  if (token) {
   store.dispatch({ type: 'AUTH_USER' })
    //Fetch Data
   }  
  }, [token])