将 Auth 添加到 Storybook 项目

Question

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

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

Answer 1

Storybook 没有 Auth 插件，很可能永远不会，因为它不在 Storybook 的范围：成为构建您自己的组件库的脚手架工具集。

Auth 功能将在您的应用程序/组件的作用范围内。

此外，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);

Answer 2

您可以使用 chromatic 作为官方故事书门户 recommends as a free publishing method。

账号免费，可基于bitbucket设置auth，git...

将 Auth 添加到 Storybook 项目

Add Auth to a Storybook project

javascript

storybook