реализовать выход с помощью Redux + TypeScript

Question

У меня есть страница входа, которая перенаправляет на приватную страницу /panel, если вход выполнен успешно и возвращен accessToken. Я использую Redux store для проверки токена в компоненте privateRoute.

Проблемы, с которыми я сталкиваюсь:

• Я хочу реализовать выйдите из страницы /panel, используя значок выхода. Если я пытаюсь добавить другой редуктор в комбинированный редуктор, я получаю ошибки TypeScript.

• Как лучше всего осуществить выход из системы с помощью значка выхода? Должен ли я использовать тот же tokenReducer добавить LOGOUT чехол в коммутатор? AccessToken из магазина нужно как-то удалить. Нужно ли использовать фильтр для удаления полезных данных в состоянии? Но где именно?

• Поскольку я использую persist, accessToken остается в локальном хранилище. Поэтому, даже если я перезагружу коды и окно (или завершу работу и перезапущу свое приложение на локальном хосте), в следующий раз я смогу получить доступ к /panel, даже не войдя в систему.

CodeSandbox:

https://codesandbox.io/s/frosty-shannon-0ivez?file= / src / store / redurs / index.ts

E-mail: c@c.com

Пароль: check

Единственное основное отличие состоит в том, что вместо ручного написания accessToken в исходном коде я запускаю мутацию GraphQL. Если вход успешен, accessToken возвращается и отправляется следующим образом:

 dispatch({ type: 'LOGIN', payload: data.loginEmail.accessToken });

, где loginEmail - это мутация, а accessToken - возвращаемая строка. Если бы кто-то мог скопировать Песочницу и вести меня, это было бы здорово.

Answer 1

Для части «где хранить токен»: Как мы знаем, мы обычно храним sessionID или что-то в Cook ie в качестве идентификатора сервера, чтобы сохранить сеанс пользователя. Если нам нужно хранить какой-то другой токен, в основном мы все еще используем cook ie, например, как laravel и ax ios Treat csrf-token: хранить в cook ie, отправьте его в заголовке при отправке запроса xhr или поместите в виде скрытого ввода в форме (чтобы оно отправлялось вместе с другими полями формы).

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