Как заставить реакт правильно обновить компоненты?

Question

[Kentavr16]

На странице входа сайта я использовал код

useEffect(() => {
    if (token) {
      navigate("../cabinet", { replace: true });
    }
  });

Токен хранится в localstorage.
Работает, но есть проблема - в компоненте с навигацией

{token ? (
        <button className="signout" onClick={deleteToken}>Выйти</button>
      ) : (
        <nav>
          <Link to="/registration">регистрация</Link>
          <Link to="/signin">вход</Link>
        </nav>

То есть: при входе перенаправляет в кабинет, но компонент с навигацией все та же содержит линки на регистрацию/вход. Кнопка выхода появляется если перезагрузить страницу.
Как правильно и красиво поправить ситуацию?

Comments

[n1ksON]

вероятно вам нужно получить данные user раньше, чем отрендерится компонент с навигацией

[Kentavr16]

n1ksON, я неправильно сформулировал вопрос. Немного подправил.

[Viktor Bogutskii]

Храните токен в secured куках. Как вы читаете токен в дочернем компоненте?

[Kentavr16]

Viktor Bogutskii, в том и дело. Пробовал:
А)записывать просто в переменную. Понял что это и не должно работать,начал искать решение.
Б) хранить в стейте. При этом читал токен и записывал в стейт внутри useEffect. Поведение не изменилось.
В)использовал контекст и useContext. Та же история.
Должно быть я где-то ошибся. Ведь в теории (и согласно документации) два последних метода должны вызывать ререндер. потому и создал вопрос - приложение крайне простое и уже не знаю куда копать.
Буду признателен за наводку как правильно читать токен в соответствии с best practice.

[strelok011]

Best practice - спрятать токен в httpOnly куке, чтоб js не мог его прочесть и авторизовываться просто через куку в хеадере запроса.
Можно вот тут почитать, к примеру https://habr.com/ru/company/ruvds/blog/512866/ (обратите внимание на комментарии)
В любом случае Вам необходимо завести через реакт контекст (к примеру) стор, доступный в любом месте приложения. Оборачиваете всё приложение в контекст провайдер, на первой странице (или при загрузке приложения) запрашиваете какие-либо данные с бэка (данные пользователя например, если авторизация через куку, либо получаете jwt-токен в ответ на ввод логина) сохраняете в переменную в контексте (isAuth например), а в целевом компоненте навигации используете эту переменную как условие выводить одно или другое. Можно вызывать useEffect(() => {какой-то код},[имя переменной]), который будет дергаться только когда "имя переменной" обновится...

[Kentavr16]

strelok011, спасибо за ссылку.

Answer 1

[Kentavr16]

вытяжка из комментария -
Best practice - спрятать токен в httpOnly куке, чтоб js не мог его прочесть и авторизовываться просто через куку в хеадере запроса.
Можно вот тут почитать, к примеру https://habr.com/ru/company/ruvds/blog/512866/ (обратите внимание на комментарии)
В любом случае Вам необходимо завести через реакт контекст (к примеру) стор, доступный в любом месте приложения. Оборачиваете всё приложение в контекст провайдер, на первой странице (или при загрузке приложения) запрашиваете какие-либо данные с бэка (данные пользователя например, если авторизация через куку, либо получаете jwt-токен в ответ на ввод логина) сохраняете в переменную в контексте (isAuth например), а в целевом компоненте навигации используете эту переменную как условие выводить одно или другое. Можно вызывать useEffect(() => {какой-то код},[имя переменной]), который будет дергаться только когда "имя переменной" обновится...