javascript - 将Auth添加到Storybook项目

有没有一种方法可以向Storybook添加身份验证？我想在我的Storybook项目中使用身份验证(我首选的身份验证提供程序为Auth0)。

是否有任何可以帮助我解决此问题的插件？我相信这是一个普通的用例，应该已经建立了一些东西。

最佳答案

没有Storybook的Auth附加组件，而且很可能永远不会存在，因为不在Storybook的含义范围内:作为构建您自己的组件库的脚手架工具集。

身份验证功能将在范围内，而您的应用程序/组件将执行。

此外，Storybook是一个多框架工具，因此您可以使用Vue，React，Angular等框架甚至纯Web组件来构建组件。 选择一个身份验证库取决于您使用Storybook的框架。

但是要详细说明如何添加一个插件以使其在您的故事范围内可用，您可以这样做(在TypeScript示例中为Vue):

// File: src/plugins/some-auth.ts
import Vue from 'vue';
import SomeAuthPluginForVue from 'SomeAuthPluginForVue';

Vue.use(SomeAuthPluginForVue);

// File: src/plugins/index.ts
import './some-auth';

// File: config/storybook/config.js
import { configure } from '@storybook/vue';

// Import Vendor Plugins
import '../../src/plugins';

// Import Styles
import '../../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);