web-dev-qa-db-fra.com

Où stocker le jeton d'accès dans react.js?

Je construis une application dans Reactjs. Je dois effectuer un appel d'extraction après avoir vérifié le paramètre access_token. Lors de l'inscription, access_token est acquis à partir du serveur principal. Mais, où stocker ces access_token. Existe-t-il un moyen de rendre ces access_token globaux, afin que tous les composants puissent y accéder. J'ai utilisé le stockage local, le cache et le stockage de session, mais ceux-ci ne sont pas recommandables . Resté dans ce numéro depuis quelques jours, aucune solution à ce problème. Merci d'avance.

reactjsaccess-token
7
Thananjaya S

Michael Washburn a un très bon article sur la façon de conserver votre état avec redux, ici sur sa page Web

Dans l'article, il a un lien vers un tutoriel vidéo très descriptif créé par Dan Abramov, l'un des co-auteurs de Redux, que j'ai suivi avec lui pour l'ajouter à mon projet. le code que j'ai utilisé pour le faire fonctionner:

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
  }
};

et ajoutez le magasin au fournisseur:

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"));
1
RamiroIsBack