Rect Jedi, where is the best place to place the following code?

Question

React

Good evening!
I already have the application ready! Hurrah Hurrah! But there is the following piece of code, which I cannot find the "right" place on an intuitive level.

if (localStorage.getItem('jwtToken')) {
    const decoded_jwt = jwt_decode(localStorage.getItem('jwtToken'));
    store.dispatch(setCurrentUser(decoded_jwt));

    const current_time = Date.now() / 1000;

    if (current_time > decoded_jwt.exp) {
        store.dispatch(refresh())
    }
}

I check if we have a token in localStorage? If there is, then we report it (dispatch), and what if suddenly the token has already burned out (rotten), we report it (dispatch).
Here you can paste this code somewhere here (index.js):

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App';

ReactDOM.render(<Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider>, document.getElementById('app'));

Now it is here (App.js - Component):

import React, { Component } from 'react';
import NavigationBar from "./NavigationBar";
import { Switch, Route } from 'react-router-dom';
import Home from "./Home.page";
import Login from "./Login.page";
import Register from "./Register.page";
import Profile from "./Profile.page";
import NotFound from "./NotFound.page";

import jwt_decode from 'jwt-decode';
import store from '../redux/store';
import { setCurrentUser, refresh } from '../redux/actions/authActions';

if (localStorage.getItem('jwtToken')) {
    const decoded_jwt = jwt_decode(localStorage.getItem('jwtToken'));
    store.dispatch(setCurrentUser(decoded_jwt));

    const current_time = Date.now() / 1000;

    if (current_time > decoded_jwt.exp) {
        store.dispatch(refresh())
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <header>
                    <NavigationBar/>
                </header>
                <main>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route exact path="/login" component={Login}/>
                        <Route exact path="/register" component={Register}/>
                        <Route exact path="/profile" component={Profile}/>
                        <Route component={NotFound}/>
                    </Switch>
                </main>
            </div>
        );
    }
}

export default App;

1. What's your idea of ​​putting the very first code (the token verification code) in ComponentWillMount() in the App component (App.js)?
Can you please advise where would be the best place to put this?
Thank you very much in advance!

Answer 1

The proposal is no longer in the place of verification, but in the file structure.
You can have a file like jwtTokenChecker.js, put a function to check there (so as not to mix it with another file):

import jwt_decode from 'jwt-decode';

import store from './redux/store';
import { setCurrentUser, refresh } from './redux/actions/authActions';

export default () => {
  if (localStorage.getItem('jwtToken')) {
      const decoded_jwt = jwt_decode(localStorage.getItem('jwtToken'));
      store.dispatch(setCurrentUser(decoded_jwt));

      const current_time = Date.now() / 1000;

      if (current_time > decoded_jwt.exp) {
          store.dispatch(refresh())
      }
  }
}

Then somewhere at the init, for example, in index.js, when the store is ready, do this:

import checkJwtToken from './jwtTokenChecker';

checkJwtToken();

As for the location, I would put it in the index or in the init of the store, because it seems that without this data there is still no point in rendering the application.