javascript - 如何在运行时导入 Vue 组件的 webpack block 时添加授权 header

Question

此任务的目的是在知道组件地址但没有访问 token 的情况下无法下载 Vue 组件包(*.js 文件)。

我正在开发一个访问控制系统和一个用户界面，其中可用组件集取决于用户的访问级别。

系统使用JSON API和JWT授权。为此，在客户端使用 Axios。为了构建应用程序，我们使用 Webpack 4，为了加载组件，我们使用 vue-loader。

用户获得授权后，应用程序向服务器请求可用路由和元数据的数组，然后将动态构建的菜单和路由添加到 VueRouter 对象。

下面我给出了一个简化的代码。

            import axios from 'axios'
            import router from 'router'

            let API = axios.create({
              baseURL: '/api/v1/',
              headers: {
                Authorization: 'Bearer mySecretToken12345'
              }
            })

            let buildRoutesRecursive = jsonRoutes => {
              let routes = []
              jsonRoutes.forEach(r => {
                let path = r.path.slice(1)
                let route = {
                  path: r.path,
                  component: () => import(/* webpackChunkName: "restricted/[request]" */ 'views/restricted/' + path)
                  //example path: 'dashboard/users.vue', 'dashboard/reports.vue', etc...
                }
                if (r.children)
                  route.children = buildRoutesRecursive(r.children)
                routes.push(route)
              })
              return routes
            }

            API.get('user/routes').then(
              response => {

                /*
                  response.data = 
                        [{
                      "path": "/dashboard",
                      "icon": "fas fa-sliders-h",
                              "children": [{
                        "path": "/dashboard/users",
                        "icon": "fa fa-users",
                                }, {
                        "path": "/dashboard/reports",
                        "icon": "fa fa-indent"
                                }
                            ]
                        }
                    ]
                */

                let vueRoutes = buildRoutesRecursive(response.data)
                router.addRoutes(vueRoutes)   
              },
              error => console.log(error)
            )

我遇到的问题是因为 Webpack 通过添加“脚本”元素而不是通过 AJAX 请求来加载组件。因此，我不知道如何向此下载添加授权 header 。因此，任何没有 token 的用户都可以通过简单地将他的地址插入浏览器的导航栏来下载私有(private)组件的代码。

理想情况下，我想知道如何使用 Axios 导入 vue 组件。

或者，如何向 HTTP 请求添加授权 header 。

Answer 1

我需要类似的东西并提出了以下解决方案。首先，我们引入了一个 webpack 插件，让我们可以在将脚本元素添加到 DOM 之前访问它。然后我们可以修改元素以使用 fetch() 获取脚本源，您可以根据需要制作提取(例如添加请求 header )。

在 webpack.config.js 中:

/*
 * This plugin will call dynamicImportScriptHook() just before
 * the script element is added to the DOM. The script object is
 * passed to dynamicImportScriptHook(), and it should return
 * the script object or a replacement.
 */
class DynamicImportScriptHookPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(
      "DynamicImportScriptHookPlugin", (compilation) =>
        compilation.mainTemplate.hooks.jsonpScript.tap(
          "DynamicImportScriptHookPlugin", (source) => [
            source,
            "if (typeof dynamicImportScriptHook === 'function') {",
            "  script = dynamicImportScriptHook(script);",
            "}"
          ].join("\n")
        )
    );
  }
}

/* now add the plugin to the existing config: */
module.exports = {
   ...
   plugins: [
     new DynamicImportScriptHookPlugin()
   ]
}

现在，在您的应用程序 js 中方便的地方:

/*
 * With the above plugin, this function will get called just
 * before the script element is added to the DOM. It is passed
 * the script element object and should return either the same
 * script element object or a replacement (which is what we do
 * here).
 */
window.dynamicImportScriptHook = (script) => {
  const {onerror, onload} = script;
  var emptyScript = document.createElement('script');
  /*
   * Here is the fetch(). You can control the fetch as needed,
   * add request headers, etc. We wrap webpack's original
   * onerror and onload handlers so that we can clean up the
   * object URL.
   *
   * Note that you'll probably want to handle errors from fetch()
   * in some way (invoke webpack's onerror or some such).
   */
  fetch(script.src)
    .then(response => response.blob())
    .then(blob => {
      script.src = URL.createObjectURL(blob);
      script.onerror = (event) => {
        URL.revokeObjectURL(script.src);
        onerror(event);
      };
      script.onload = (event) => {
        URL.revokeObjectURL(script.src);
        onload(event);
      };
      emptyScript.remove();
      document.head.appendChild(script);
    });
  /* Here we return an empty script element back to webpack.
   * webpack will add this to document.head immediately.  We
   * can't let webpack add the real script object because the
   * fetch isn't done yet. We add it ourselves above after
   * the fetch is done.
   */
  return emptyScript;
};