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