reactjs - 如何安全地将 Facebook 响应令牌保存到 React 应用程序？

Question

我正在开发一个使用 facebook 登录的 React 应用程序，登录成功后，facbook 返回用户当前经理的页面列表，包括令牌。这些令牌我将来会在我的应用程序中使用。这是我要保存的响应：

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

但我不知道如何将此响应保存在我的应用程序中以确保安全。哪个最安全？Redux 状态（不安全），Redux 存储？饼干？本地存储？还是记忆？

在我的应用程序中，我会多次使用这些令牌，所以我认为应该将它们分派到 Redux 商店，但它安全吗？

非常感谢你！

标签： reactjstoken

Answer 1

您收到的令牌里面没有密码。
你是说你能不能把它存放在任何地方？
我们现在所在的网站（stackoverflow）也将该令牌存储在本地存储中

您可以在这张图片中看到他们将令牌存储在本地存储中。

---

安全吗？
是的，因为它没有任何重要数据，例如密码或信用卡号。此外，如果您作为用户在您的计算机上拥有此令牌，那么您不会将此字符串提供给其他人以访问您的帐户（就像您向某人提供您的密码，这不是开发人员的错）并且此字符串太大以至于没有其他人可以自己创建可接受的字符串。

---

redux/cookies/本地存储？ 我使用它的方式是。在登录/注册时，我将在本地存储和请求标头中设置它，刷新后我将首先检查本地存储中是否存在令牌，如果是，则需要再次设置标头，因为刷新时它们将丢失。

---

通过 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']
    }
}