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

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

我已经将应用程序转换为SSR，并正在制定认证细节，欢迎提供任何资源或设计建议

---

我搜索了有同样问题的人，并尝试了各种各样的选择，但都没有成功，所以我想知道是否有人知道我可能在这里出了什么问题。提前谢谢

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

log（'auth or not'）返回true，在我的模板中，Authenticated={{isAuth}}也返回true

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

离题问题（请随意说明）

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

您会推荐Nuxt作为SPA项目，而不是普通的vue、vuex、vue路由器，还是您认为我应该过渡到SSR，因为我是该项目的负责人

这是一个志愿者项目，所以我只是想提高我的技能，在我做的时候帮助一个朋友。任何学习资源都将不胜感激

从“~/plugins/firebaseconfig.js”导入{fireDb}
从“vuex”导入{mapGetters}
导出默认值{
数据（）{
返回{
writeSuccessful:false，
userLoggedIn:false，
}
},
beforeCreate（）{
console.log（'创建之前'）
让_this=this；
console.log（会话存储）；
Object.key（sessionStorage）.forEach（（e，i）=>{
//从会话存储获取用户信息
if（JSON.parse（sessionStorage[e]）.uid）{
让user=JSON.parse（sessionStorage[e]）；
让用户信息={
userEmail:user.userEmail，
userThumbnail:user.photoURL，
用户名：user.displayName
};
_此.$store.commit（'userLogin'，userInfo）
console.log（'auth or not'）
log（this.store.getters.isAuth）；
}
})
},
计算：
制图员({
anuncios:“anuncios/get”，
isAuth:“isAuth”
}),
布局（{store}）{return store.getters.isAuth？'authenticated'：'default'}，

切换到SSR模式后，我能够更好地进行调试，我认为切换到SSR后安装布局后会调用beforeCreate钩子，这是我在nuxt文档上看到此图像后应该实现的。因此，我意识到在befor中进行身份验证之前，正在检查isAuth状态getter在我应该检查会话存储的地方创建

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

我解决了我的问题，但仍然对我的设计模式不安全，因此仍然会受到批评，如果我的答案有任何错误，请纠正我

---

编辑

我发现了一个非常有帮助的例子，如果其他人正在使用firebase和nuxt进行身份验证，请查看下面davidroyer的例子

---

我认为从Nuxt开始是个好主意，因为Nuxt基本上是（不仅仅是）使用Vue.js.Nuxt的一种有见解的方法将向您展示使用Vue的好模式。@Pierre说这是一个好观点，我将尝试在SSR中重新创建此项目，看看现在是否可以使用它。谢谢您的建议！在Nuxt中动态更改布局不起作用。但是您可以从应用商店中读取布局的名称。如果布局更改为您必须重新加载页面。请参阅我的示例项目：