Аутентификация Auth0 с Gridsome на стороне сервера, рендеринг разрывов с окном не определен

Question

Я реализовал auth0 Vuejs в соответствии с их руководством по Gridsome, и он отлично работал в разработке. Тем не менее, когда я бегу gridsome build сборка не удалась, потому что window не определено в контексте сервера.

Я обнаружил несколько проблем в Auth0-js lib, которые утверждают, что Auth0 должен использоваться только на стороне клиента, однако из-за того, как работает Gridsome, я не могу найти способ загружать только Auth0-js в сторона клиента.

У Gridsome есть main.js, куда я бы добавил плагины, и там я определяю маршрутизацию для аутентификации.

Main.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 });

  })

Основываясь на руководстве по реализации auth0 для Gatsbyb.js, я попытался исключить auth0-js из загрузки веб-пакетов с помощью 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',
        },
      ],
    },

Я хотел бы получить некоторые идеи о том, как включить и загрузить Auth0 только в контексте на стороне клиента с Gridsome

Answer 1

У меня была такая же проблема с использованием аутентификации Firebase с Gridsome.

Кажется, что код в created() ловушка жизненного цикла выполняется в процессе сборки Gridsome (который является серверной средой), но код в mounted() ловушка жизненного цикла выполняется только в браузере!

Решением было поместить весь код, который должен выполняться только на клиенте, в mounted крючок жизненного цикла.

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

---

В моем случае (с Firebase Auth) это было решение:

В компоненте Default Layout:

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