Как сохранить маркер ответа Facebook в приложении React для безопасности?

Question

Я занимаюсь разработкой приложения React с использованием входа в Facebook, после успешного входа в систему facbook возвращает список страниц, которые текущий менеджер пользователя включает в себя токены. Эти токены я буду использовать в будущем в своем приложении. Это ответ, который я хочу сохранить:

[
 {
   // page 1
   access_token: "this_is_token",
   category: "Community",
   id: "461787374317076",
   name: "page_name",
   ......
 },
 {
   // page 2
 },
 ....// other pages
]

Но я не знаю, как сохранить этот ответ в моем приложении для безопасности. что лучше сохранить? Состояние Redux (небезопасно), магазин Redux? Печенье? LocalStorage? или память?

В моем приложении я буду использовать эти токены много раз, поэтому я думаю, что следует отправить их в магазин Redux, но безопасен ли он?

Большое спасибо!

Answer 1

Полученный токен не имеет пароля внутри.
Вы говорите, можете ли вы хранить его где-нибудь?
Веб-сайт, на котором мы сейчас работаем (stackoverflow), также хранит этот токен в локальном хранилище.

Вы можете видеть на этом рисунке, что они хранят токен в местном хранилище. <Ч /> это безопасно?
Да, поскольку он не имеет важных данных, таких как пароль или номер кредитной карты. Более того, если у вас, как пользователя, есть этот токен на вашем компьютере, вы не передадите эту строку другим людям для доступа к вашей учетной записи (как будто вы даете кому-то свой пароль, который не является ошибкой разработчика), и эта строка слишком велика, чтобы никто другой не может создать приемлемую строку самостоятельно. <Ч /> redux / cookies / localalstorage? То, как я использую это. В signIn / signUp я установлю его в localstorage и запрашиваю заголовки, а после обновления сначала проверю, присутствует ли токен в localstorage или нет, если да, тогда нужно будет снова установить заголовки, так как при обновлении они будут потеряны.

<Ч /> С помощью axios вы можете легко установить заголовки следующим образом. Затем на сервере необходимо получить заголовки из запроса и проверить свой токен.

import axios from 'axios'

export default function setAuthToken(token){

    if(token){
        axios.defaults.headers.common['autherization'] = `Bearer ${token}`
    }
    else{
        delete axios.defaults.headers.common['autherization']
    }
}