如何在 reactjs 中处理令牌认证？答案

【问题标题】：How to handle token authentication in reactjs?如何在 reactjs 中处理令牌认证？
【发布时间】：2017-08-29 06:45:11
【问题描述】：

假设我有用于登录的 API，请退出。我正在使用令牌身份验证。我有反应组件名称登录。我可以调用 API 并获得令牌。但是，我不明白如何在浏览器中保存令牌，直到注销或稍后自动销毁令牌。

【问题讨论】：

您可以同时使用 cookie 和本地存储。如果不使用cookie，您可以检查客户端是否支持本地存储。

标签： javascript reactjs authentication token

【解决方案1】：

您可以创建一个存储模块并在客户端的浏览器中检查可用存储。

import LocalStorage from "./localstorage"
import Cookie from "./cookie"

// Function to check availability of `localStorage`
function storageAvailable() {
    try {
        var storage = window["localStorage"],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return false;
    }
}

export default function Storage() {
  return storageAvailable() ? LocalStorage : Cookie
}

使用上面的模块：

function login(redirect = '/home') {
  // set your session data
  storage.set({email, id})

  // redirection
  window.location.href = redirect
}

function logout(redirect = "/") {
  storage.clear()

  // redirection
  window.location.href = redirect
}
const Session = {
  login,
  logout
}

export default Session

现在您可以简单地使用Session 模块分别以Session.login() 和Session.logut() 进行登录和注销。

如何使用cookie： How do I create and read a value from cookie?

如何使用localStorage：Storing Objects in HTML5 localStorage

【讨论】：

您从“./localstorage”导入。那么，我需要为 localstorage 写什么吗？
".localstorage" 和 "./cookie" 是用于设置 localstorage 和 cookie 的模块。您可以创建 getter 和 setter 来设置和获取存储数据。我添加了有关如何使用 localstorage 和 cookie 的链接。
@AshrafulIslam 是的 "./localstorage" 。是设置存储数据的实际代码。我只是向您展示了一种正确执行此操作的抽象方法。您可以在存储中设置您的身份验证令牌或登录后所需的任何数据。

【解决方案2】：

你可以使用universal-cookie包在cookie中设置，

const cookies = new Cookies();
cookies.set('token', this.token, { path: '/' });

不要忘记从universal-cookie 导入（或要求）Cookies。

您可以使用以下方法将其取回：

cookies.get('token');

参考https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie

您也可以将其保存在本地存储中：

localStorage.setItem('token', this.token);

但保存在 cookie 中会更好，参考：

Local Storage vs Cookies

【讨论】：