使用localStorage存储状态, vue ssr报client-side no match server-rendered
<div id="1" v-if="isSignin">
已登录
</div>
<div id="2" v-if="!isSignin">
<router-link to="/signin">登录</router-link>
<router-link to="/signup">注册</router-link>
</div>
<script>
export default {
data () {
return {
token: undefined
}
},
created () {
if (process.env.IS_BROWSER) {
this.$store.dispatch('loadToken')
this.token = this.$store.state.token
}
},
computed: {
isSignin () {
return this.token && this.token.uid > 0
}
}
}
</script>
export default new Vuex.Store({
state: {
token: undefined,
},
mutations: {
loadToken (state, jwt) {
if (token) {
state.token = jwt
}
}
},
actions: {
loadToken ({ commit }, params) {
let tmp = localStorage.getItem('token') || undefined
if (tmp) {
let decoded = jwtDecode(tmp)
commit('loadToken', decoded)
}
}
}
})
由于使用localStorage存储登录状态, vue server端渲染内容仅包含<div id = "2">
, 到浏览器端执行后渲染内容包含了<div id = "1">
, 导致报错:The client-side rendered virtual DOM tree is not matching server-rendered content
.
请问谁有解决方案(不包括使用cookie保存状态的方案), 即vue ssr使用localStorage保存登录状态?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论