Дублирование данных аутентификации между хранилищем и localStorage

Question

Во многих руководствах по React я видел наличие токенов или каких-либо других данных в localStorage, используемых для управления состоянием аутентификации в приложении. Но если бы я должен был создать компонент header / navbar, который показывает ссылку для «входа» или «выхода» в зависимости от аутентификации пользователя, кажется, что мне пришлось бы дублировать этот токен localStorage как состояние либо в хранилище с избыточностью или в компоненте для запроса повторного рендеринга при изменении состояния аутентификации. Возможно, это беспокоит меня больше, чем следовало бы, но дублирование этой информации кажется избыточным и может также потребовать какого-то фиктивного действия для правильной установки состояния аутентификации, если в localStorage уже есть существующий токен, когда пользователь впервые посещает приложение или обновляет страницу .

Есть ли лучший способ обработки данных аутентификации в приложении React, чем я описал здесь?

Answer 1

Один из вариантов - заглянуть в библиотеку redux-persist .Он обрабатывает все сохранение и восстановление вашего состояния Redx для вас между сессиями.

Answer 2

Я не храню токены / данные аутентификации в Redux или локальном состоянии, я использую модуль аутентификации, который просто читает / записывает localStorage и условно отображает панель навигации:

<div>
   ...
   <a>{Auth.isAuthenticated() ? 'Sign Out' : 'Sign In'}</a>
</div>

и Auth.js:

class Auth {
    static storeToken(token) {
        localStorage.setItem('token', token)
    }

    static isAuthenticated() {
        return localStorage.getItem('token') !== null
    }

    static removeToken() {
        localStorage.removeItem('token')
    }

    static getToken() {
        return localStorage.getItem('token')
    }
}

export default Auth

Это все еще не идеально, потому что все мое состояние не в одном месте, но я думаю, что это немного лучше, чем дублирование информации, как вы сказали