将 Auth 添加到 Storybook 项目

Question

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

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

Answer 1

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);