输入路由前刷新令牌Vuex
输入路由前刷新令牌Vuex
提问于 2019-02-13 18:21:50
我有一个前端Web应用程序接口，API内置于。
我的问题是当我刷新页面时(在用Vuejs/Vuex编写的SPA中)，我应该刷新我的令牌，以便用我的Api刷新会话。
我在main.js中尝试过，但他的问题是请求是异步的，响应在路由之后到达。
main.js
if (localStorage.getItem('refresh_token')) {
store.dispatch('refresh_token').then(function(response){
console.log(response);
});
}
new Vue({
router,
store,
env,
render: h => h(App)
}).$mount('#app')函数刷新令牌，调用我的Api，并通过响应设置新令牌和新刷新令牌。但我的问题是，通过这种方式，我可以使用旧令牌在我的“仪表板”中进行第一个异步调用，然后使用新的调用。因此，我尝试了不同的方式，但我不知道是否有最佳做法。
因此，我的问题是:在Vuejs应用程序中，我应该在哪里使用vuex商店刷新令牌？
Stack Overflow用户
发布于 2019-02-14 02:16:47
我建议将它放在toplevel Vue组件的mounted属性中。如果您有依赖于正在刷新的令牌的其他组件，则可以将其与存储中的状态变量相结合，该状态变量表示刷新已经完成。例如，使用顶级组件App.vue
...
mounted () {
store.dispatch('refresh_token')
}
...将状态变量添加到vueex存储区：
const store = new Vuex.Store({
state: {
sessionRefreshed: false
},
..
mutations: {
[REFRESH_TOKEN] (state) {
// existing mutations, and..
state.sessionRefreshed = true
},
},
..
actions: {
refreshToken ({ commit }) {
myAsyncFetchToken().then(() => commit(REFRESH_TOKEN))
},
}这可以确保整个应用程序知道刷新的状态，而不强制它是同步的。然后，如果您有需要刷新令牌的组件，则可以显示加载小部件、占位符等，并在状态发生变化时使用观察者进行操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54676964
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号