使用localStorage存储状态, vue ssr报client-side no match server-rendered

发布于 2022-09-11 16:23:21 字数 1392 浏览 21 评论 0

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文