在进入路由之前刷新令牌Vuex答案

【问题标题】：Refresh token Vuex before enter in Routing在进入路由之前刷新令牌Vuex
【发布时间】：2019-07-07 16:28:44
【问题描述】：

我有一个前端 Web 应用程序接口，它带有在 Laravel 中使用 Passport 构建的 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 商店刷新令牌？

【问题讨论】：

标签： vue.js vuex laravel-passport

【解决方案1】：

我建议把它放在顶层 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))
    },
  }

这可确保您的整个应用程序都知道您的刷新状态，而不会强制它同步。然后，如果您有需要刷新令牌的组件，您可以显示正在加载的小部件、占位符等，并在状态更改时使用观察者来执行操作。

【讨论】：

但是如果我进行异步调用，是的，我可以显示加载，但如果我有其他异步调用，我可能会使用旧令牌进行调用，所以我会收到 401，不是吗？
根据他们的定义，您无法控制异步调用完成的顺序。您可以正确构建应用程序，以便调用不会出现 401，即使用状态变量和观察者。

【解决方案2】：

使用router#beforeEachguard怎么样？在访问任何“受限”组件之前，我使用它来确定身份验证令牌是否存储在 cookie 中。如果未设置令牌，我将重定向到/login。

我意识到我的场景正是您所要求的，但我希望您可以使用它来增强您的实现。

【讨论】：

有趣，我会尝试，如果令牌已过期，我会在 beforeEach 中调用新令牌并等待调用“next()”的响应，对吗？
是的，这听起来很合理。