Ректные джедаи, где лучше всего разместить следующий код?

Question

[Jedi]

Добрый вечер!

У меня уже приложение готово! Ура-ура! Но есть следующий кусок кода, который я не могу найти "правильное" на интуитивном плане место.

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())
    }
}

Я проверяю, а нет ли у нас токен в localStorage? Если есть, то сообщаем об этом (dispatch`им), а что если вдруг токен уже сгорел(протух), сообщаем об этом (сучим).

Вот можно вставить этот код где-то здесь (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'));

Сейчас он вот здесь (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. Как вам идея разместить самый первый код (код проверки токена) в ComponentWillMount() в компоненте App (App.js)?

Посоветуйте, пожалуйста, куда грамотнее будет это вставить?

Заранее большое спасибо!

Answer 1

[Алексей Лауд]

Предложение больше не по месту проверки, а по файловой структуре.
Можно завести файл вроде jwtTokenChecker.js, поместить туда функцию для проверки (чтобы не смешивать ее с другим файлом):

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())
	    }
	}
}

Потом где-нибудь при ините, например, в index.js, когда стор уже готов, сделать так:

import checkJwtToken from './jwtTokenChecker';

checkJwtToken();

Что касается расположения, я бы поместил в index или в инит стора, потому что кажется, что без этих данных еще нет смысла рендерить приложение.

Comments

[Jedi]

Алексей, большое спасибо за ответ!)

Я предпочту разместить в index, так как чекер не зависит напрямую от Store.

А вызывать checker до ReactDOM.render() или после?

И ещё один вопрос... в компоненте логин и регистрации я в componentDidMound проверяю следующим образом «не авторизовал ли пользователь» if this.props.auth.isAuthenticated то рераут.

Алексей, как думаете, стоит ли эту проверку делать в componentDidMound или делать это всё в WillMount, ну или же ваш вариант?

Спасибо Вам!!)

[Алексей Лауд]

PHPjedi,

А вызывать checker до ReactDOM.render() или после?

Разницы нет, ReactDOM.render работает асинхронно, так что даже если вызовите строкой ниже, выполнится все равно раньше. Но я бы разместил раньше, просто потому что рендер обычно является последним пунктом, и это может быть более наглядно.

this.props.auth.isAuthenticated я бы проверял сразу в конструкторе, если это значение попадает в компонент сразу. Незачем рендерить что-то дефолтное, а потом сразу менять на другое.

[Jedi]

Алексей Казаков, спасибо!