练习 - 缓存组件加载的数据

8 分钟

在本练习中，将了解 Microsoft Graph 工具包组件如何缓存其数据。你还将控制缓存配置，并了解它如何影响从 Microsoft Graph 加载数据。

准备工作

作为本练习的先决条件,完成以下步骤。

1.配置Microsoft Entra 应用

对于此模块，需要具有以下设置的应用程序：

名称： 我的应用
平台： 单页应用程序（SPA）
支持的帐户类型： 任何组织目录中的帐户 (任何Microsoft Entra 目录 - 多租户) 和个人Microsoft帐户 (，例如 Skype、Xbox)
重定向 URI：http://localhost:3000

可以按照以下步骤创建此应用程序：

在浏览器中，转到 Microsoft Entra 管理中心，登录，然后转到“Microsoft Entra ID”。
在左窗格中选择应用注册，然后选择新建注册。
在“注册应用”屏幕中，输入以下值：
- 名称：输入应用程序的名称。
- 支持的帐户类型：选择 任何组织目录中的帐户 (任何Microsoft Entra 目录 - 多租户) 和个人Microsoft帐户 (，例如 Skype、Xbox) 。
- 重定向 URI (可选)：选择“单页应用程序 (SPA)”，然后输入http://localhost:3000。
- 选择“注册”。

2.设置开发环境

在桌面上，创建名为 mgt-performance的文件夹。
在 Visual Studio Code 中，打开 mgt-performance 文件夹。
在 mgt-performance 文件夹中，创建名为 index.html 的文件。

将以下代码复制到 index.html，并将替换为 YOUR-CLIENT-ID 之前创建的 Microsoft Entra 应用中复制 的应用程序 (客户端) ID 。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
  </body>
</html>

将名为 .vscode 的文件夹添加到项目文件夹的根目录中。
将名为 settings.json 的文件添加到 .vscode 文件夹中。将以下代码复制并粘贴到 settings.json中，并保存该文件。
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

浏览工具包组件缓存的数据

首先，让我们看看默认情况下Microsoft Graph 工具包组件如何缓存数据。

在 Visual Studio Code 中，打开 index.html 文件。

在结束正文标记之前，添加 mgt-people 组件，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-people></mgt-people>
  </body>
</html>

在 Visual Studio Code 中，选择以下 Visual Studio Code 中的组合键，然后搜索 Live Server：
- Windows: CTRL+SHIFT+P
- macOS: COMMAND+SHIFT+P
运行 Live Server 以测试应用。
打开浏览器并转到 http://localhost:3000。如果在启动 Live Server 时 index.html 打开该文件，浏览器将打开 http://localhost:3000/Index.html。在使用 Microsoft 365 开发人员帐户登录之前，请确保将 URL http://localhost:3000更改为。如果不更新 URL，将收到以下错误。

The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.
选择" 登录 "按钮，然后使用Microsoft 365 开发人员帐户登录。同意所需权限，然后选择接受。应会看到人员列表。
在 Web 浏览器中，打开开发人员工具,并切换到 应用程序 选项卡。在存储部分中，展开 IndexedDB 组。请注意 Microsoft Graph 工具包创建的三个数据库。
展开 mgt-people 数据库，然后选择 peopleQuery。在详细信息窗格中，展开存储在缓存中的数据：
在开发人员工具中，切换到" 网络 "选项卡。选择仅显示 XHR 请求并刷新页面。请注意，当应用显示数据时，它未运行单个请求来Microsoft Graph。所有数据都从缓存加载。

工具包组件的控制缓存设置

已了解默认情况下，Microsoft Graph 工具包组件如何缓存和从缓存加载数据。现在，让我们禁用缓存，看看它如何影响应用的行为。

在 Web 浏览器中，打开开发人员工具，然后选择 控制台 选项卡。

通过在控制台中运行以下语句，清除Microsoft Graph 工具包缓存：

var cacheId = await mgt.Providers.getCacheId();
mgt.CacheService.clearCacheById(cacheId)

若要确认缓存已清除，请切换到应用程序选项卡。IndexedDB下不再有任何数据库。
接下来，禁用所有工具包组件的缓存。在 Visual Studio Code 中，打开 index.html 文件。在结束标题标记之前，添加以下代码片段：
```
<script>
  mgt.CacheService.config.isEnabled = false;
</script>
```
在 Web 浏览器中，刷新页面。在开发人员工具中，切换到" 网络 "选项卡。请注意 Microsoft Graph 的不同请求。
再次刷新页面，并注意已运行相同的请求。由于禁用了缓存，因此需要从 Microsoft Graph 检索所有数据。