Question

假设我有用于登录的API，请注销。我正在使用令牌认证。我有反应组件名称登录。我可以调用API，我正在获取令牌。但是，我不了解如何在浏览器中保存令牌，直到注销或片刻后自动销毁令牌。

Answer 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

Answer 2

您可以使用universal-cookie包在Cookie中设置它，

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

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

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

cookies.get('token');

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

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

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

但保存cookie会更好，请参考：

Local Storage vs Cookies

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

2 个答案: