动态更新 Nuxt 布局时遇到问题

Posted 2023-03-06

【中文标题】动态更新 Nuxt 布局时遇到问题

【英文标题】：Having trouble updating Nuxt layout dynamically

【发布时间】：2020-03-02 07:28:18

【问题描述】：

编辑：为经过身份验证的页面创建布局并在登录后重定向而不使用主页上的条件，而是使用将未经身份验证的用户重定向到主页的中间件，这会是一种更好的设计模式吗？

我已将应用程序转换为 s-s-r 并正在制定身份验证详细信息，欢迎提供任何资源或设计建议！

---

我搜索了有同样问题的人，并尝试了各种替代方案，但都没有成功，所以我想知道是否有人知道我可能在哪里出错了。提前致谢！

以下代码应该可以解释我遇到的问题。我正在使用 Nuxt SPA 并且无法根据商店更新布局。

console.log('auth or not') 返回 true，在我的模板 Authenticated = isAuth 中也返回 true。

问题是当我将代码保存在 vscode 中时，布局会相应更新，但是当我刷新它时，即使会话已保存并且存储 getter isAuth 返回 true，它也会返回到“默认”。

题外话（请随意考虑）

我是一名自学成才的开发人员，所以如果您看到任何反模式（可能会有很多），我愿意接受建议。

你会推荐 Nuxt 用于 SPA 项目而不是普通的 vue、vuex、vue-router 还是你认为我应该只是过渡到 s-s-r，因为我处于项目的开始阶段。

这是一个志愿者项目，所以我只是在努力提高自己的技能并帮助朋友。任何学习资源将不胜感激！

 import  fireDb  from '~/plugins/firebaseconfig.js'
    import  mapGetters  from 'vuex'

    export default 
      data () 
        return 
          writeSuccessful: false,
          userLoggedIn: false,
        
      ,
      beforeCreate() 
          console.log('before create')
          let _this = this;
          console.log(sessionStorage);
          Object.keys(sessionStorage).forEach((e, i) => 
          //getting user info from session storage
          if(JSON.parse(sessionStorage[e]).uid) 
            let user = JSON.parse(sessionStorage[e]);

            let userInfo = 
              userEmail: user.userEmail,
              userThumbnail: user.photoURL,
              userName: user.displayName
            ;
            _this.$store.commit('userLogin', userInfo)
            console.log('auth or not')
            console.log(this.$store.getters.isAuth);

          
        )

      ,
      computed:
        mapGetters(
          anuncios: 'anuncios/get',
          isAuth: 'isAuth'
        ),
      layout(store)  return store.getters.isAuth ? 'authenticated' : 'default' ,

很抱歉这篇长文，再次感谢所有花时间阅读它的人！

【问题讨论】：

我认为从 Nuxt 开始是个好主意，因为 Nuxt 基本上（不仅）是一种使用 Vue.js 的自以为是的方式。 Nuxt 将向您展示与 Vue 一起使用的良好模式。

@PierreSaid 说得很好，我将尝试在 s-s-r 中重新创建这个项目，看看我现在是否可以让它工作。感谢您的建议！

Nuxt 中的动态布局更改不起作用。但是您可以从商店中读取布局的名称。如果布局发生变化，您必须重新加载页面。查看我的示例项目：github.com/urbansky/switch-layout

【参考方案1】：

切换到 s-s-r 模式后，我能够更好地调试，我认为在切换到 s-s-r 后安装布局后调用 beforeCreate 挂钩，我应该在 nuxt 文档上看到此图像后意识到这一点。所以我意识到 isAuth 状态获取器在我应该检查 sessionStorage 的 beforeCreate 中发生身份验证之前被检查。

https://nuxtjs.org/guide/views

还发现这有助于使用中间件进行身份验证。

https://auth.nuxtjs.org/

我解决了我的问题，但对我的设计模式仍然缺乏安全感，因此仍会受到批评，如果我的回答有任何问题，请纠正我！

---

编辑

我找到了一个真正帮助我的示例，如果其他人正在努力使用 firebase 和 nuxt 进行身份验证，请查看 davidroyer 的以下示例。

https://github.com/davidroyer/nuxt-s-s-r-firebase-auth.v2