Javascript 如何在reactjs中处理令牌身份验证？

假设我有用于登录的API，请注销。我正在使用令牌身份验证。

---

我有一个组件名登录。我可以调用API并获得令牌。但是，我不知道如何在浏览器中保存令牌，直到注销或稍后自动销毁令牌。

您可以使用

universal cookie

软件包将其设置在cookie中

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

不要忘记从

通用cookie

导入（或要求）

cookie

您可以使用以下方法将其检索回来：

cookies.get('token');

指

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

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

但保存在cookie中是一个更好的主意，请参阅：

---

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

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.login（）和
Session.logut（）登录和注销

如何使用cookie：

如何使用localStorage:
您可以同时使用cookie和localStorage。如果不使用cookie，您可以检查客户端是否支持本地存储。您是从“/localstorage”导入的。那么，我需要为localstorage编写任何内容吗？.localstorage“和“/cookie”是用于设置localstorage和cookie的模块。您可以创建getter和setter来设置和获取存储数据。我添加了有关如何使用localstorage和cookie的链接。@ashrafulisam Yes.“/localstorage”。是将设置存储数据的实际代码。我只是向你展示了一种抽象的方法。您可以在登录存储后设置身份验证令牌或所需的任何数据。