1. 什么是 Storyblok？
Storyblok 是一个面向开发者的内容管理系统 (CMS)，可用于创建可扩展的、可定制的、高度创新的数字体验。Storyblok 的灵活性使得它适合于各种项目，从个人博客到企业级应用程序。
2. 什么是 storyblok-preview-auth？
Storyblok-preview-auth 是一个用于 Storyblok 的 npm 包，可以帮助我们在开发过程中验证 Storyblok 的预览模式所需的访问令牌，并允许我们在本地测试预览模式。在使用 Storyblok 进行开发时，预览模式是一个很好的功能，因为它允许你实时查看所做的更改。
3. 如何使用 storyblok-preview-auth？
在开始使用 storyblok-preview-auth 之前，需要在 Storyblok 的管理界面中对该项目进行设置。在项目的设置中，选择“API 访问令牌”，然后创建一组新的访问令牌。需要记住的是，访问令牌的过期时间是 60 天。
接下来，在项目中安装 storyblok-preview-auth：
--- ------- ---------------------- ------
安装完成后，在你的项目的 package.json 文件中增加如下脚本：
---------- - -------- ----------------------- -------- ---------------------- --- -
使用如下命令启动：
--- -----
使用以上命令启动本地服务器，该服务器将监听来自代码更改的请求，并验证预览模式所需的令牌。在运行本地服务器的同时，Storyblok 将会显示一个预览模式的标志。这意味着你可以随时在你的本地开发环境中查看 Storyblok 的预览模式。
4. 使用 storyblok-preview-auth 后的例子
以下是使用 storyblok-preview-auth 的一个例子，假设我们有一个 React 组件，它接收一个 storyblokObject 作为参数：
------ ----- ---- -------
------ --------- ---- ------------
----- ----------- - -- --------------- -- -- -
--
--------------------------------
------------------------------------
---
-
--------------------- - -
---------------- -----------------
------ ----------------------------
------------ ----------------
-------------
-
------ ------- -----------我们可以在 index.js 文件中使用 MyComponent 组件，并同时使用 storyblok-preview-auth 来验证预览模式所需的令牌：
------ ----- ---- -------
------ -------- ---- -----------
------ --- ---- -------
------ --------------- ---- ---------------------
------ ----------------------- ---- ------------------------
----- --------- - --- -----------------
------------ -----------------------------
--
----------------
-------------------------
---- --------------------- --
---------------------------
-------------------------------
-在 StoryblokPreviewWrapper 组件内，storyblok-preview-auth 将检查是否存在有效的访问令牌。如果找到，则预览模式标志将在 Storyblok 中显示。
这是一个简单的示例，演示了如何在 React 应用程序中使用 storyblok-preview-auth 来验证预览模式所需的令牌。当然，您可以使用 Storyblok 和 storyblok-preview-auth 以多种方式进行互动，以便满足您的需求。
总结
Storyblok 是一个功能强大的面向开发者的 CMS，而 storyblok-preview-auth 是一个很好的工具，可以在开发过程中帮助验证预览模式所需的访问令牌，并允许您在本地测试预览模式。通过使用 storyblok-preview-auth，您可以加快开发速度，同时也可以提高代码的可靠性。
这篇文章从介绍什么是 Storyblok 开始，介绍了什么是 storyblok-preview-auth，如何使用它，并提供了一个示例，涵盖了从安装到实际使用的每个步骤。希望这篇文章能够帮助您更好地了解 Storyblok 和它的 npm 包 storyblok-preview-auth。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5d51ab1864dac670ef