如何使用PHP API创建nuxt授权会话

Question

保存用户的授权会话时出现问题。我正在使用“ vuex-persistedstate”来保存刷新之间站点的状态。 问题是我使用用户名和密码输入了对PHP API的登录调用。如果登录成功，PHP（后端）将在浏览器的本地存储中设置身份验证令牌。授权令牌，用户名和电子邮件也保存在商店的状态中（以便可以从任何地方访问它们）。用户登录后可以与该站点进行交互，但是在刷新后，中间件会显示该错误，该错误是为未经授权的访问而显示的。

对我来说，棘手的部分是从中间件的本地存储/状态获取身份验证令牌，以便我可以有条件地呈现特定模板/相应地重定向用户。

刷新中间件后，会将存储状态视为初始值，例如{authToken: null, userName: null, email: null, etc ...}。 另一个问题是我无法从nuxt的“后端”访问本地存储属性。

我试图设置商店状态的初始授权令牌，但是在刷新后，中间件始终将商店状态作为空值获取。

middleware / auth.js

export default function ({ store, redirect, rootState }) {
  if (!store.state.userToken) {
    return redirect('/login')
  }
}

store / index.js

userId: null,
userEmail: null,
userToken: null

persistedState.js

import createPersistedState from 'vuex-persistedstate'

export default ({ store, isHMR }) => {
  // In case of HMR, mutation occurs before nuxReady, so previously saved state
  // gets replaced with original state received from server. So, we've to skip HMR.
  // Also nuxtReady event fires for HMR as well, which results multiple registration of
  // vuex-persistedstate plugin
  // @see https://webpack.js.org/concepts/hot-module-replacement/
  // @see https://github.com/robinvdvleuten/vuex-persistedstate/issues/137
  if (isHMR) return

  if (process.client) {
    window.onNuxtReady((nuxt) => {
      // vuex plugins can be connected to store, even after creation
      createPersistedState()(store)
    })
  }
}

我想在刷新后保存用户的授权会话。