无法在应用初始化时从localStorage初始化商店

问题描述：

我正在努力使用登录用户的帐户详细信息localStorage初始化我的Vuex商店。无法在应用初始化时从localStorage初始化商店

我已经经历了尽可能多的使用Nuxt进行验证的示例，并且他们都没有演示如何在客户端从localStorage拉动authToken以在用户刷新页面时随后的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发送请求，我用一个爱可信拦截装饰与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，并要求如果是这样，然后用它。

但和这里的起脚，当一个请求时，我看store.state.account.accessToken低，不料其被重新初始化回的“无效”的值。

什么？阙？

它几乎就像重新初始化幕后？或者不知何故，插件中的state是“服务器端状态”？因为如果我尝试并记录buildInitialState我没有收到任何消息，指出正在运行产生与INVALID的地图的路径。

基本上，我不完全了解Nuxt在这里的初始化途径。

如果有任何Nuxt大师能够帮助我理解这一点，那会更棒，这对我来说已经变成了一个展示瓶颈。

本质上！我想要做的就是保存用户，这样当他们刷新页面时，我们可以继续运行而不会再次重新登录....我认为这很简单。

谢谢和问候，杰森。

答

我已经解决了这个问题，其中一些实验和评论来自其他海报周围所谓的SSR和SPA。

首先，这https://github.com/nuxt/nuxt.js/issues/1500线程真的帮了我，并从@jsonberry最后评论从fetch和asyncData带领我的心在正确的方向，走。

我终于对NUXT.j如何分离SSR和SPA调用有了更多的了解。

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

虽然我在这个建议中取得了进展，但事实证明created()也被称为SSR，我仍然试图用无法访问的凭据初始化我的存储。

最后，将初始化移动到mounted（）方法中！

在总结

所以：

我的账户店铺被单独留在家中，我没有尝试（SSR的东西运行时，它仅覆盖了在某个点）被创建时初始化
在mounted() in layout/defualt.vue我从localStorage读取并初始化帐户存储，以便我可以使用适当的accessToken开始制作API请求。

这似乎已经成功了。

无法在应用初始化时从localStorage初始化商店

相关推荐