我正在构建一个单页面应用程序，用户可以根据他们是否登录来看到不同的页面。登录调用工作正常，授权令牌保存在本地存储中。
设置: 我已经设置了一个名为的吸气剂loggedIn返回true如果在状态上设置了令牌。这是我的确切代码auth.js商店模块：
const state = {
accessToken: TokenService.getToken(),
}
const getters = {
loggedIn: (state) => {
return state.accessToken ? true : false
},
TokenService 有这个：
getToken() {
return localStorage.getItem(TOKEN_KEY)
}
问题：当用户登录时，令牌已正确保存在本地存储中（我可以看到它）。然而，DevTools 中的 Vuex 面板显示了 getterloggedIn as false和accessToken as undefined. 当我手动刷新页面时，问题自行解决。然后商店就被正确填充了。
我究竟做错了什么？我需要商店能够做出反应，这样我就可以根据情况显示一些页面或其他页面loggedIn getter.
本地存储不是反应性数据，因此当它发生更改时，vuex 存储无法收到通知。
当你的应用程序加载时会发生什么getToken()在最开始调用，由于用户尚未登录，因此它返回undefined，当用户登录时，本地存储会更新，但是getToken()不会再被呼叫。
但！现在您的本地存储中有数据，因此当您手动刷新页面时getToken()被调用并返回一个Truthy value.
你能做的就是写一个action更新accessToken并在用户登录时调用它。
像这样的东西：
api.getToken(URL, userData).then((result) => {
// if user is logged in successfully call the action
if (result) this.$store.dispatch('auth/updateAccessToken');
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
