Nuxt.js Oauth 有时会导致整个网页崩溃

Question

我已经创建了 Nuxt.js 应用程序，我决定在 Nuxt/auth 模块中构建，一切都在网络浏览器中运行良好，但有时当用户使用移动浏览器导航时，我的应用程序被粉碎了，只是它什么也不响应，也没有 api 调用，但是刷新一次后一切正常，我猜不出发生了什么，我在 Internet 上的可用资源中找不到任何东西。

const axios = require('axios')
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'app',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      // { src: "//code-eu1.jivosite.com/widget/UoBOrMfSmm", async: true },
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [ '~/assets/css/transition.css', '~/assets/css/errors.css' ],
  pageTransition: "fade",
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: "~/plugins/star-rating", ssr: false },
    { src: "~/plugins/mask", ssr: false },
    { src: "~/plugins/rangeSlider", ssr: false },
    { src: "~/plugins/vueSelect", ssr: false },
    { src: "~/plugins/vuelidate", ssr: false },
  ],


  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    [ '@nuxtjs/google-analytics', {
      id: 'xxx'
    } ]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/toast',
    '@nuxtjs/auth-next',
    [ 'nuxt-lazy-load', {
      defaultImage: '/spin2.gif'
    } ],
    [ 'nuxt-facebook-pixel-module', {
      /* module options */
      track: 'PageView',
      pixelId: '',
      autoPageView: true,
      disabled: false
    } ],
    'nuxt-moment',
    '@nuxtjs/robots',
    '@nuxtjs/sitemap'
  ],

  moment: {
    locales: ['ru', 'en']
  },


  toast: {
    position: 'top-center',
},

  robots: [
    {
      UserAgent: '*',
      Disallow: ['/user', '/admin'],
    },
  ],

  axios: {
    baseURL: 'https://api.test.com/', // Used as fallback if no runtime config is provided
  },

  sitemap:{
     exclude:[
       '/user',
       '/admin',
       '/admin/*',
       '/user/*',
     ],
     defaults: {
      changefreq: 'daily',
      priority: 1,
      lastmod: new Date()
    },
     routes: async () => {
      const { data } = await axios.get('https://api.test.com/api/cars/all')
      return data.map((product) => `https://test.com/product/${product.id}/${product.name}`)
    }
  },

  loading: {
    color: '#F48245',
    height: '4px'
  },

  target: 'server',

  /* auth */
  auth: {
    plugins:[
      { src: "~/plugins/providers", ssr:false},
    ],
    redirect: {
      login: '/',
      logout: '/',
      home: '/',
      callback: '/callback'
    },
    strategies: {
      local: {
        token: {
          property: 'user.token',
        },
        user: {
          property: false
        },
        endpoints: {
          login: { url: 'api/login', method: 'post' },
          logout: { url: 'api/logout', method: 'post' },
          user: { url: 'api/user', method: 'get' }
        },
      },

    facebook: {
        endpoints: {
          userInfo: 'https://graph.facebook.com/v6.0/me?fields=id,name,picture{url}',
        },
        redirectUri:'xxx',
        clientId: '184551510189971', 
        scope: ['public_profile', 'email'],
      },

      google: {
        responseType: 'token id_token',
        codeChallengeMethod: '',
        clientId: 'xxx',
        redirectUri: 'https://test.com/callback',
        scope: ['email'],
     },

    },
    cookie: {
      prefix: 'auth.',
    },
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
};

这是我的插件目录文件，我正在处理客户端 oauth 进程。

export default async function ({ app }) {
    console.log('auth executed')
    if (!app.$auth.loggedIn) {
        return
    } else {
        console.log('auth executed inside loop')
        const auth = app.$auth;
        const authStrategy = auth.strategy.name;
        if (authStrategy === 'facebook') {
            let data2 = {
                fb_token: auth.user.id,
                first_name: auth.user.name
            }
            try {
                const response = await app.$axios.$post("/api/oauth", data2);
                await auth.setStrategy('local');
                await auth.strategy.token.set("Bearer " + response.user.token);
                await auth.fetchUser();

            } catch (e) {
                console.log(e);
            }
        } else if (authStrategy === 'google') {
            let dataGoogle = {
                google_token: auth.user.sub,
                first_name: auth.user.given_name,
                last_name:auth.user.family_name
            }
            try {
                const response = await app.$axios.$post("/api/oauth", dataGoogle);
                await auth.setStrategy('local');
                await auth.strategy.token.set("Bearer " + response.user.token);
                await auth.fetchUser();

            } catch (e) {
                console.log(e);
            }
        }

    }
}

Answer 1

对于任何与 DOM 水合有关的问题，您可以在这里查看我的答案：https://stackoverflow.com/a/67978474/8816585

它确实有几种可能的情况（客户端和服务器端渲染模板之间存在差异的动态内容、一些随机函数、完全错误的 HTML 结构等），还有来自 Alex 的一篇不错的博客文章！