4

我已经根据他们的 Gridsome 教程实现了 auth0 Vuejs，它在开发中运行良好。但是，当我运行gridsome build构建失败时，因为window在服务器上下文中未定义。

我在 Auth0-js lib 中发现了一些问题，声称 Auth0 只应在客户端使用，但是，由于 Gridsome 的工作方式，我似乎无法找到仅加载 Auth0-js 的方法客户端。

Gridsome 有 main.js，我将在其中添加插件，并在其中定义身份验证路由。

主.js

import AuthServicePlugin from '~/plugins/auth0.plugin'
import auth from '~/auth/auth.service'

export default function (Vue, { router, head, isClient }) {
  ...
  Vue.use(AuthServicePlugin)
  //Handle Authentication
  router.beforeEach((to, from, next) => {
    if (to.path === "/auth/logout" || to.path === "/auth/callback" || auth.isAuthenticated()) {
      return next();
    }

    // Specify the current path as the customState parameter, meaning it
    // will be returned to the application after auth
      auth.login({ target: to.path });

  })

基于 Gatsbyb.js auth0 implementation tutorial，我尝试将 auth0-js 从 webpack 加载中排除null-loader

gridsome.config.js

configureWebpack: {
    /*
     * During the build step, `auth0-js` will break because it relies on
     * browser-specific APIs. Fortunately, we don’t need it during the build.
     * Using Webpack’s null loader, we’re able to effectively ignore `auth0-js`
     * during the build. (See `src/utils/auth.js` to see how we prevent this
     * from breaking the app.)
    */
    module: {
      rules: [
        {
          test: /auth0-js/,
          use: 'null-loader',
        },
      ],
    },

我很想了解如何使用 Gridsome 仅在客户端上下文中包含和加载 Auth0

4

1 回答 1

3

将Firebase 身份验证与 Gridsome一起使用时，我遇到了同样的问题。

似乎created()生命周期钩子中的代码在 Gridsome 构建过程（这是一个服务器环境）中执行，但mounted()生命周期钩子中的代码只在浏览器中执行！

解决方案是将只应在客户端中运行的所有代码放在mounted生命周期挂钩中。

mounted() {
  // load the `auth0-js` here
  ...
}

在我的实例中（使用 Firebase Auth），这是解决方案：

在默认布局组件中：

const app = import("firebase/app");
    const auth = import("firebase/auth");
    const database = import("firebase/firestore");
    const storage = import("firebase/storage");

    Promise.all([app, auth, database, storage]).then(values => {
      // now we can access the loaded libraries !
    });
}
于 2019-10-02T10:15:50.220 回答