在react.js中存储访问令牌的位置？-Java 学习之路

我正在Reactjs中构建一个应用程序 . 在验证access_token之后，我必须进行fetch调用 . 在注册时，从后端服务器获取access_token . 但是，在哪里存储这些access_token . 是否有任何方法可以使这些access_token全局，以便所有组件都可以访问它 . 我使用了本地存储，缓存和会话存储，但这些不可取 . 这个问题在过去的几天内得到了解决，任何解决方案 . 事先提前 .

1 回答

迈克尔沃什伯恩有一篇关于如何用redux来坚持你的州的非常好的文章，here on his webpage

在这篇文章中，他有一个链接到由Redux的共同作者之一Dan Abramov创建的very descriptive video tutorial，我跟着他一起将它添加到我的项目中 . 这是我用来使其工作的代码：

store.js

import { createStore, combineReducers } from "redux";
import { UserReducer, CopyReducer } from "../reducers";
import { loadState, saveState } from "../utils/localStorage";

export const giveMeStore = () => {
  const reducers = combineReducers({
    copy: CopyReducer,
    user: UserReducer
  });
  const persistedState = loadState();
  const store = createStore(reducers, persistedState);
  //user contains the TOKEN
  store.subscribe(() => {
    saveState({
      user: store.getState().user
    });
  });
  return store;
};

localStorage.js

export const loadState = () => {
  try {
    const serializedState = localStorage.getItem("state");
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};
export const saveState = state => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem("state", serializedState);
  } catch (err) {
    //ignoring write erros
  }
};

并将商店添加到提供者：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import { giveMeStore } from "./store.js";

const Root = () => {
  return (
    <Provider store={giveMeStore()}>
      //... your components
      //...
    </Provider>
  );
};

ReactDOM.render(<Root />, document.querySelector("#root"));

回复于 2024-05-11T19:08:13+08:00

在react.js中存储访问令牌的位置？

1 回答

相关问题