本地存储后如何访问全局变量？

Question

I am having issues using a local variable outside of the function. I am making a call to myapi.com/access_token to obtain the access token and then I need to use that access token in the header of my request to the jsonserverprovider. I have tried declaring it with window.bl_token but I still get a result of undefined when I attempt to console.log the response.

import React from 'react';
import { fetchUtils, Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

var bl_token;

const data = { email: 'xxx@xxx.com', password: 'xxx' };

fetch('https://myapi.com/access_token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((bl_data) => {
  window.bl_token=bl_data.access_token;
})

const httpClient = (url, options = {}) => {
  if (!options.headers) {
      options.headers = new Headers({ Accept: 'application/json' });
      options.headers = new Headers({Authorization: bl_token});

  }
  return fetchUtils.fetchJson(url, options);
};

const dataProvider = jsonServerProvider('https://myapi.com/', httpClient);
const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="links"/>
   </Admin>
);
export default App;

Answer 1

Potentially what is happening here is that when the page is loaded the initial value of bl_token is undefined, your function to set fetch the token will be executing but once this is completed and the token is obtained the state is not updated, leaving bl_token as undefined when you try and obtain it.

To fix it you will need to have react watch for the state change, the easiest way I can think of would be the react hook useEffect.

import React, { useEffect, useState } from 'react';
import { fetchUtils, Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';


export const App = () => (

const [blToken, setBlToken] = useState(null); // chuck the token in react state
const data = { email: 'xxx@xxx.com', password: 'xxx' };

// add the react hook useEffect, this will fire on page load
useEffect({
 fetchData(); 
},[])


// move the fetch into a function
const fetchData = () => {
  fetch('https://myapi.com/access_token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((bl_data) => {
  //window.bl_token=bl_data.access_token;
  // update the react state here
   setBlToken(bl_data.access_token)
})
}

const httpClient = (url, options = {}) => {
  if (!options.headers) {
      options.headers = new Headers({ Accept: 'application/json' });
      // use the state variable here
      options.headers = new Headers({Authorization: blToken});

  }
  return fetchUtils.fetchJson(url, options);
 };



// add a check to render only if the blToken is present

if(blToken) {
 const dataProvider = jsonServerProvider('https://myapi.com/', httpClient);
 return( 
    <Admin dataProvider={dataProvider}>
        <Resource name="links"/>
   </Admin>
 )
} else {
  return null
}

);

By using react's state to keep track of the variable it can re render when the data is present for you to access.

Answer 2

Var is never the right solution in any use case. In this example I would use the useEffect function that comes with react:

const App = () => {

const [loaded, setLoaded] = React.useState(false);
const [accessToken, setAccessToken] = React.useState([]);

React.useEffect(() => {
 // put your fetch here (please be aware that the following is pseudo code)
 fetch('test').then(res => res.json()).then(res => setAccessToken(res.token));
);

 return (
  <div>
   {loaded ? yourLogicThatDependsOnAccessToken : null }
 </div>
 );
}