Question

我很难使用localStorage中登录用户的帐户详细信息初始化我的Vuex商店。

我使用Nuxt通过尽可能多的Auth示例，并且没有一个示例客户端如何从authToken提取localStorage以重新使用用户刷新页面或导航到应用程序时的后续API请求

免责声明：我没有在SSR中使用Nuxt（这可能会影响您的答案）。

令人讨厌的是，我可以实际从localStorage加载并初始化我的状态但是它会被覆盖。我将通过这个小代码示例向您展示我的意思：

buildInitialState () {
   if (!process.server) {
      // Query the localStorage and return accessToken, refreshToken and account details
      return {accessToken: <valid-string>, refreshToken: <valid-string>, account: <valid-json-blob>}
   } else {
      // Return "empty map", we use the string "INVALID" for demonstration purposes.
     return {accessToken: "INVALID", refreshToken: "INVALID", account: "INVALID"}
  }
}

export const state = () => buildInitialState()

如果我在buildInitialState上设置断点，我可以看到我正确地使用localStorage的值初始化状态，即我得到accessToken和refreshToken等..回来。

一切似乎都很好。

但然后 .....在程序的另一部分我使用Axois发送请求，我使用axios拦截器来装饰{{1}的请求}。要做到这一点，我必须将其粘贴到插件中才能访问accessToken。

像这样：

store

此处export default ({ app, store }) => { axios.interceptors.request.use((config) => { const accessToken = _.get(store.state, ['account', 'accessToken']) if (accessToken) { config.headers.common['x-auth-token'] = accessToken } return config }, (error) => Promise.reject(error)) }已在提供给store的箭头功能中关闭，因此当我发送请求时，它会看到是否存在有效axios，如果有，则使用它

但是，这是踢球者，当发出请求时，我会看accessToken和低，看到它已经重新初始化回到＆＃的值34; INVALID＆＃34;

什么？阙？

这几乎就像商店在幕后重新初始化一样？或者不知何故，插件中的store.state.account.accessToken是＆＃34;服务器端状态＆＃34; ??因为如果我尝试登录state，我就不会收到任何消息，表明正在运行生成buildInitialState地图的路径。

基本上，我并没有完全理解Nuxt在这里采用的初始化路径。

如果任何Nuxt大师能够帮助我理解这一点，那会更好，它会让我变成一个显示器。

基本上！我希望能够做的就是保存用户，这样当他们刷新页面时我们可以继续运行而不必强迫他们重新登录....我认为这很简单。

谢谢和问候，杰森。

Answer 1

我通过一些实验和其他海报围绕所谓的SSR和SPA的评论来解决这个问题。

首先，这个https://github.com/nuxt/nuxt.js/issues/1500主题确实帮助了我，@ jsonberry的最终评论引导我的思路朝着正确的方向发展，远离fetch和asyncData。

我终于对NUXT.j分离SSR和SPA呼叫的方式有了更多了解。

然后我尝试了@robyedlin建议将localStorage初始化放在我的主created()页面的layout/default.vue方法中。

虽然我在该建议方面取得了进展，但事实证明created()也被称为SSR，我仍然在尝试使用无法访问的凭据初始化我的商店。

最后，将初始化移动到mounted（）就可以了！

总结如下：

我的帐户商店一个人留下，我不会在创建它时尝试对其进行初始化（当SSR内容运行时，它会被覆盖）
在mounted()中layout/defualt.vue，我从localStorage读取并初始化帐户存储，以便我可以使用相应的accessToken开始发出API请求。

这似乎已经成功了。

无法在App初始化时从localStorage初始化存储

1 个答案: