使用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保存登录状态?

阅读 3.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题