Javascript 带有AWS Amplify身份验证错误的Nuxt应用程序

每当我尝试在我的NUXT应用程序上使用Amplify authentication配置身份验证时，一切正常，但在注册用户后，它不会进入“isAuthenticated”视图，而是向我发出以下警告

“vue.runtime.esm.js？2b0e:619[vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的，例如，在中嵌套块级元素，或者缺少。请退出并执行完整的客户端呈现。”

问题发生在这里的代码中

  <div v-if="!$auth.isAuthenticated">
    <Login />

    <Register />
  </div>

  <div v-else>
    {{ $auth.email }}

    <v-btn @click="$store.dispatch('auth/logout')">Logout</v-btn>
  </div>

最后，我认为需要的最后一段代码是在我的nuxt.config.js文件中注册插件的地方，我在那里注册了插件，如下所示

     import Vue from 'vue'
    
    class AuthService {
      constructor(store) {
        this.$store = store
      }
    
      get isAuthenticated() {
        return this.$store.state.auth.isAuthenticated
      }
    
      get user() {
        return this.$store.state.auth.user
      }
    
      get email() {
        if (!this.user) return
        return this.user.attributes.email
      }
    }
    
    export default async ({ store }) => {
      const authService = new AuthService(store)
      Vue.prototype.$auth = authService
      Vue.$auth = authService
      await store.dispatch('auth/load')
    }

this auth.js store file looks like this...

    import { Auth } from 'aws-amplify'

export const state = () => ({
  isAuthenticated: false,
  user: null,
})

export const mutations = {
  set(state, user) {
    state.isAuthenticated = !!user
    state.user = user
  },
}

export const actions = {
  async load({ commit }) {
    try {
      const user = await Auth.currentAuthenticatedUser()
      commit('set', user)
      return user
    } catch (error) {
      commit('set', null)
    }
  },

  async register(_, { email, password }) {
    const user = await Auth.signUp({
      username: email,
      password,
    })
    return user
  },

  async confirmRegistration(_, { email, code }) {
    return await Auth.confirmSignUp(email, code)
  },

  async login({ commit }, { email, password }) {
    const user = await Auth.signIn(email, password)
    commit('set', user)
    return user
  },

  async logout({ commit }) {
    await Auth.signOut()
    commit('set', null)
  },
}

 plugins: [
{ src: '~/plugins/amplify.js', mode: 'client' },
'~/plugins/auth.js', ],

---

我仔细检查了vue工具，isAuthenticated已切换为true，所以我很困惑。这也是我的第一个NUXT应用程序，也是第一次使用AWS，所以我显然错过了一些东西。谢谢你的任何意见

我发现了我的错误。我正在为用于移动视图而不是桌面视图的抽屉编写代码。我不知道错误消失的原因，但是当我把它放在桌面视图和移动视图中时，一切都正常了。