React Redux Auth Middlware

Question

Я делаю приложение для входа в систему с использованиемact / redux, вот мой поток.

• Пользователь входит в систему с парой электронной почты и паролем и получает токен, который я хранить в куки.
• Получив токен, я могу получить его учетные данные, выполнив запрос к конечной точке /auth, которая получает его личные данные - имя, фамилию, адрес электронной почты.

У меня есть PrivateRoute, который использовал для проверки подлинности, однако я хочу запустить проверку подлинности на всех маршрутах, а не только на частных. Таким образом, если пользователь просматривает домашнюю страницу, я все равно могу показать его имя в навигации (например) Кажется, основной проблемой является правильное место для вызова действия auth.

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Provider } from 'react-redux';
import store from './store';

// Styling
import './App.css';

// Privat route
import PrivateRoute from './routes/PrivateRoute';

// Common
import Navigation from './components/common/Navigation';

// Components
import Login from './components/Login';
import Home from './components/Home';
import Profile from './components/Profile';
import ArticlesList from './components/Profile/ArticlesList';
import ArticleForm from './components/Profile/ArticleForm';

const App = () => (
    <Provider store={store}>
        <Router>
            <Switch>
                {/* Public routes */}
                <Route exact path="/" component={Home} />
                <Route exact path="/login" component={Login} />

                {/* Private routes */}
                <PrivateRoute exact path="/profile" component={Profile} />
                <PrivateRoute exact path="/profile/articles" component={ArticlesList} />
                <PrivateRoute exact path="/profile/articles/new" component={ArticleForm} />
                <PrivateRoute exact path="/profile/articles/:id(\d+)" component={ArticleForm} />
            </Switch>
        </Router>
    </Provider> 
);

export default App;

Вот фрагмент моего userActions.js , где определено действие аутентификации

export const auth = () => async dispatch => {
    dispatch({ type: AUTH_USER_REQUEST });

    try{
        let data = await UserService.auth();

        dispatch({
            type: AUTH_USER_SUCCESS,
            payload: data
        });
    }catch(err){
        dispatch({
            type: AUTH_USER_ERROR,
            payload: err.message
        });
    }
}

Одна из моих идей состояла в том, чтобы создать родительский класс Route для маршрутизации и вызвать auth там.

Answer 1

Чтобы преодолеть это, я сделал что-то вроде следующего, используя Redux:

<Switch>
  <Route 
    path="/"
    component={this.props.auth.authenticationInProgress ? BlankPage : 
      (this.props.auth.isAuthenticated ? SegmentPage : LoginPage)}
    exact={true}
  />
  <Route component={NotFoundPage}/>
</Switch>

Если пользователь вошел в систему, Маршрут отображает SegmentPage. В противном случае он отображает LoginPage. После запуска процесса входа или выхода из системы аутентификация переключается, и страница отображается соответствующим образом. Также я сохраняю статус процесса аутентификации, чтобы при проверке аутентификации пользователю не отображались личные данные.