编辑：为经过身份验证的页面创建布局并在登录后重定向而不使用首页上的条件而不是将未经身份验证的用户重定向到首页的中间件会是更好的设计模式吗？
我已将应用程序转换为SSR，正在制定身份验证详细信息，欢迎任何资源或设计建议！
我搜索了存在相同问题的人，并尝试了各种替代方法而没有成功，所以我想知道是否有人对我可能在这里出问题的地方有任何线索。预先感谢！
以下代码应解释我所遇到的问题。我正在使用Nuxt SPA，并且无法根据商店更新布局。
console.log（'auth or not''）返回true，在我的模板中Authenticated = {{isAuth}}也返回true。
事情是，当我将代码保存在vscode中时，布局更新会保持一致，但是当我刷新时，即使考虑到会话已保存且商店getter isAuth返回true，它也会恢复为'default'。
话题题（请随意考虑）
我是一名自学成才的开发人员，因此，如果您看到任何反模式（可能会有很多），我可以征求意见。
您会建议在普通的vue，vuex，vue-router上为SPA项目推荐Nuxt，或者您认为我应该过渡到SSR，因为我处于项目的开端。
这是一个志愿者项目，所以我只是想提高自己的技能，并在帮助我的同时帮助朋友。任何学习资源将不胜感激！
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' },很抱歉，冗长的帖子，再次感谢您抽出宝贵时间阅读它！
切换到SSR模式后，我可以进行更好的调试，我发现切换到SSR后在挂载布局后调用了beforeCreate钩子，我应该在nuxt文档中看到此图像后才意识到这一点。因此，我意识到在进行身份验证之前，应该在检查本机sessionStorage的beforeCreate中检查了isAuth状态获取器。
https://nuxtjs.org/guide/views
[还发现这有助于使用中间件进行身份验证。
我解决了我的问题，但对我的设计模式仍然没有把握，因此仍然容易受到批评，如果我的回答有问题，请纠正我！
编辑
[如果有其他人正在努力使用Firebase和nuxt进行身份验证，我发现了一个真正帮助了我的示例，请查看davidroyer的以下示例。