将 Auth 添加到 Storybook 项目

Question

有没有办法向 Storybook 添加身份验证？我想在我的 Storybook 项目中使用身份验证（我首选的身份验证提供程序是Auth0）。

是否有任何附加组件可以帮助我解决这个问题？我相信这是一个常见的用例，应该已经构建了一些东西。

Answer 1

Storybook 没有 Auth 插件，而且很可能永远不会，因为它不在Storybook的范围内：成为构建您自己的组件库的脚手架工具集。身份验证功能将在您的应用程序/组件所做的范围内。此外，Storybook 是一个多框架工具，因此您可以使用 Vue、React、Angular 等框架甚至纯 Web 组件构建组件。选择身份验证库取决于您在 Storybook 中使用的框架。但是要详细说明如何添加一个在您的故事范围内可用的插件，您可以这样做（TypeScript 示例中的 Vue）：// File: src/plugins/some-auth.tsimport Vue from 'vue';import SomeAuthPluginForVue from 'SomeAuthPluginForVue';Vue.use(SomeAuthPluginForVue);// File: src/plugins/index.tsimport './some-auth';// File: config/storybook/config.jsimport { configure } from '@storybook/vue';// Import Vendor Pluginsimport '../../src/plugins';// Import Stylesimport '../../src/assets/styles/index.scss';const req = require.context('../../src/stories', true, /.stories.js$/);function loadStories() {  req.keys().forEach((filename) => req(filename));}configure(loadStories, module);