此处的键在中adalApiFetch定义adalConfig.js。如您所见，这是一个简单的包装adalFetch。此方法（在中定义react- adal）接收ADAL实例（authContext），资源标识符（resourceGuiId），方法（fetch），URL（url）和对象（options）。该方法执行以下操作：

1. 使用ADAL实例（authContext）获取由标识的资源的访问令牌resourceGuiId。
2. 将此访问令牌添加到对象的headers字段中options（如果未提供，则创建一个）。
3. 调用传入的给定“获取”方法，url并将options对象作为参数。

该adalApiFetch方法（您已在中定义adalConfig.js）仅adalFetch使用中标识的资源进行调用adalConfig.endpoints.api。

好的，那么您如何使用所有这些来发出REST请求，并在React应用程序中使用响应？让我们举个例子。在以下示例中，我们将使用Microsoft Graph
API作为受Azure AD保护的REST API。我们将通过友好的标识符URI（“
https://graph.microsoft.com
”）来识别它，但是请记住，那也可以是Guid应用程序ID。

adalConfig.js 定义ADAL配置，并导出一些辅助方法：

    import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

    export const adalConfig = {
    tenant: '{tenant-id-or-domain-name}',
    clientId: '{app-id-of-native-client-app}',
    endpoints: {
        api: 'https://graph.microsoft.com' // <-- The Azure AD-protected API
    },
    cacheLocation: 'localStorage',
    };

    export const authContext = new AuthenticationContext(adalConfig);

    export const adalApiFetch = (fetch, url, options) =>
    adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

    export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

index.jsindexApp.js使用runWithAdalfrom中的方法进行包装react- adal，以确保在加载之前使用Azure AD对用户进行签名indexApp.js：

    import { runWithAdal } from 'react-adal';
    import { authContext } from './adalConfig';

    const DO_NOT_LOGIN = false;

    runWithAdal(authContext, () => {

    // eslint-disable-next-line
    require('./indexApp.js');

    },DO_NOT_LOGIN);

indexApp.js 只是加载并呈现的实例App，在这里没什么花哨的：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';

    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();

App.js 是发生魔术的简单组件：

• 我们定义一个state值。在这种情况下，apiResponse之所以调用它是因为我们仅显示原始API响应，但是您当然可以根据需要命名该状态（或具有多个状态值）。
• 在期间componentDidMount（在元素在DOM中可用之后运行），我们调用adalApiFetch。我们传入fetch（从Fetch API作为fetch参数，传入我们要发出的REST请求的/me端点（在本例中为Microsoft Graph 的端点）：
• 在该render方法中，我们仅在<pre>元素中显示此状态值。

    import React, { Component } from 'react';
    import { adalApiFetch } from './adalConfig';

    class App extends Component {

      state = {
        apiResponse: ''
      };

      componentDidMount() {

        // We're using Fetch as the method to be called, and the /me endpoint 
        // from Microsoft Graph as the REST API request to make.
        adalApiFetch(fetch, 'https://graph.microsoft.com/v1.0/me', {})
          .then((response) => {

            // This is where you deal with your API response. In this case, we            
            // interpret the response as JSON, and then call `setState` with the
            // pretty-printed JSON-stringified object.
            response.json()
              .then((responseJson) => {
                this.setState({ apiResponse: JSON.stringify(responseJson, null, 2) })
              });
          })
          .catch((error) => {

            // Don't forget to handle errors!
            console.error(error);
          })
      }

      render() {
        return (
          <div>
            <p>API response:</p>
            <pre>{ this.state.apiResponse }</pre>
          </div>
        );
      }
    }

    export default App;