【发布时间】：2020-03-02 07:28:18
【问题描述】：
编辑：为经过身份验证的页面创建布局并在登录后重定向而不使用主页上的条件，而是使用将未经身份验证的用户重定向到主页的中间件，这会是一种更好的设计模式吗？
我已将应用程序转换为 SSR 并正在制定身份验证详细信息，欢迎提供任何资源或设计建议！
我搜索了有同样问题的人，并尝试了各种替代方案，但都没有成功，所以我想知道是否有人知道我可能在哪里出错了。提前致谢！
以下代码应该可以解释我遇到的问题。我正在使用 Nuxt SPA 并且无法根据商店更新布局。
console.log('auth or not') 返回 true，在我的模板 Authenticated = {{isAuth}} 中也返回 true。
问题是当我将代码保存在 vscode 中时，布局会相应更新，但是当我刷新它时，即使会话已保存并且存储 getter isAuth 返回 true，它也会返回到“默认”。
题外话（请随意考虑）
我是一名自学成才的开发人员，所以如果您看到任何反模式（可能会有很多），我愿意接受建议。
你会推荐 Nuxt 用于 SPA 项目而不是普通的 vue、vuex、vue-router 还是你认为我应该只是过渡到 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' },很抱歉这篇长文，再次感谢所有花时间阅读它的人！
【问题讨论】：
-
我认为从 Nuxt 开始是个好主意，因为 Nuxt 基本上（不仅）是一种使用 Vue.js 的自以为是的方式。 Nuxt 将向您展示与 Vue 一起使用的良好模式。
-
@PierreSaid 说得很好，我将尝试在 SSR 中重新创建这个项目，看看我现在是否可以让它工作。感谢您的建议！
-
Nuxt 中的动态布局更改不起作用。但是您可以从商店中读取布局的名称。如果布局发生变化，您必须重新加载页面。查看我的示例项目：github.com/urbansky/switch-layout
标签： javascript vue.js vuex nuxt.js