使用 JWT 进行 React-Redux 身份验证

Question

我正在尝试为我的 React 应用程序构建一个登录系统。我正在使用 React、Redux、Redux-Thunk 和 React Router。登录后，我将 JWT 存储在本地存储中。

问题是我在返回网站后找不到“重新验证”用户的好方法。调用动作创建者来获取用户数据是一个好地方吗？现在我只是检查本地存储中是否有令牌，并更改我的减速器中的值。但是你会在哪里实现获取用户配置文件的逻辑呢？这是我附加的主要组件。

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])