将客户端 vuex 状态同步到服务器端状态的最佳实践？

Question

我已经克隆了vue-hackernews-2.0，这是一个带有 SSR 和 vuex 的 Vue.js 应用程序。

这个应用程序listens on port 8080，而我的 api 服务器在我的本地开发环境中侦听 3000。我正在尝试使用 jwt 在其中实现用户身份验证。

当客户端从 api 服务器收到令牌时，客户端状态会随着令牌更新，但是 如何让服务器端状态知道用户已登录？

一般来说，如何同步客户端和服务器端的状态？

我想到的一个丑陋的 hack 是，当用户使用正确的凭据登录时，api 服务器应该打开与 8080 服务器的套接字连接并在服务器端触发状态更新？这是一个可接受/可扩展的解决方案吗？ 这方面的最佳实践是什么？

更多详情.. (a) 在路由器中我实现了导航守卫：

      ....
      if (router.app.$store.getters.isLoggedIn)  next()
      else  next('/login')
      ...

现在在我的登录页面登录时，我将一个操作发布到我的 api 服务器（不是端口 8080 上的 vue 服务器），并将令牌存储在客户端状态。 但是当我重新加载登录的仪表板页面时，它在服务器端状态下找不到令牌，上面的函数isLoggedIn返回false，并尝试渲染登录页面请参见上面的代码，因此客户端 DOM 与服务器呈现的页面不匹配，客户端尝试在客户端重新呈现 DOM。

Answer 1

嗯， 你写你正在使用jwt。

所以服务器不需要知道用户是否登录。

只要客户端在每个请求（header、cookie、（body））上提供这个jwt，服务器就可以授权这些请求。

要正确处理jwt，您可以使用npm 包：

const JWT = require('jsonwebtoken')

发行代币：

const token = JWT.sign({
    userId: user.id,
    moreData: undefined,
  },
   'somRandomLongPrivateKey123', // protect it, env var?
  {
    expiresIn: '2d',
  })

验证令牌的中间件：

module.exports = async (req, res, next) => {
try {
  const payload = JWT.verify(token, 'yourprivatekey') 
  req.user = User.find(payload.userId) 

  next()

} catch(e) {
  return res.status(401).send('no valid token')  
}