Я реализовал 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