Vue Axios 拦截器响应 Firebase 401 令牌 Expired/Refresh（未定义）

Question

我在 Vuejs v2 网站中使用以下拦截器将 firebase 令牌推送到我的节点后端。在后端，我 detect/verify 令牌，使用 uid 从数据库中提取一些数据，然后处理任何 api 调用。

即使我使用 firebase onIdTokenChanged 来自动检索新的 ID 令牌，有时，如果用户已登录，但在一个小时内处于非活动状态，令牌会过期而不会刷新.现在，这没什么大不了的——我可以检查 axios 响应拦截器并将它们推送到登录页面，但这似乎很烦人，如果我可以检测到 401 令牌已过期，请重新发送 axios 调用并刷新令牌，如果用户碰巧与需要来自 API 调用的数据的组件交互，用户甚至不会知道它发生了。所以这就是我所拥有的：

main.js

Vue.prototype.$axios.interceptors.request.use(function (config) {
     const token = store.getters.getSessionToken;
     config.headers.Authorization = `Bearer ${token}`;
     return config; 
});

 

Vue.prototype.$axios.interceptors.response.use((response) => {
    return response   }, async function (error) {
    let originalRequest = error.config
  
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      let user = auth.currentUser;
      await store.dispatch("setUser", {user: user, refresh: true}).then(() => {
        const token = store.getters.getSessionToken;
        Vue.prototype.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
        return Vue.prototype.$axios.request(originalRequest);
      });
    }
    return Promise.reject(error);   });


let app;

auth.onAuthStateChanged(async user => {
  await store.dispatch("setUser", {user: user, refresh: false}).then(() => {
    if (!app) {
      app = new Vue({
        router,
        store,
        vuetify,
        render: h => h(App)
      }).$mount('#app')
    }
  })
  .catch(error => {
    console.log(error);
  }); 
});

vuex

setUser({dispatch, commit}, {user, refresh}) {
    return new Promise((resolve) => {
      if(user)
      {   
        user.getIdToken(refresh).then(token => {
          commit('SET_SESSION_TOKEN', token);
          this._vm.$axios.get('/api/user/session').then((response) => {
              if(response.status === 200) {
                commit('SET_SESSION_USER', response.data);
                resolve(response);
              }
           })
          .catch(error => {
              dispatch('logout');
              dispatch('setSnackbar', {
                color: "error",
                timeout: 4000,
                text: 'Server unavailable: '+error
              });
              resolve();
          });
            
        })
        .catch(error => {
          dispatch('logout');
          dispatch('setSnackbar', {
            color: "error",
            timeout: 4000,
            text: 'Unable to verify auth token.'+error
          });
          resolve();
      });
      }
      else
      {
        console.log('running logout');
          commit('SET_SESSION_USER', null);
          commit('SET_SESSION_TOKEN', null);
        resolve();
      }  
    })
  },

我在 vuex 中设置令牌，然后在所有 API 调用的拦截器中使用它。所以我在这段代码中看到的问题是，我正在使用过期令牌向后端发出 API 调用。这个 returns 一个 401 和 axios 响应拦截器将其拾取并完成刷新 firebase 令牌的过程。然后，这会使用与更新后的令牌相同的配置向后端发出新的 API 调用，并 returns 向原始 API 调用（如下）。

这一切似乎工作，我可以在开发 tools/network 中看到，API 调用的响应正在发回正确的数据。不过，好像落入下面apicall/code的圈套了。例如，当我尝试使用 response.data.server 加载表单字段时，我得到一个 "undefined"。如果我刷新页面（同样，正常 token/loading 过程应该如此），此页面会正常加载所有内容，所以我知道没有加载问题。

vue组件（加载smtp设置到页面）

getSMTPSettings: async function() {
    await this.$axios.get('/api/smtp')
      .then((response) => {
        this.form.server = response.data.server;
        this.form.port = response.data.port;
        this.form.authemail = response.data.authemail;
        this.form.authpassword = response.data.authpassword;
        this.form.sendemail = response.data.sendemail;
        this.form.testemail = response.data.testemail;
        this.form.protocol = response.data.protocol;
      })
      .catch(error => {
        console.log(error);
      });

  },

我已经看了几天了，我不明白为什么它不会加载它。数据似乎在那里。我正在做的事情的时机是否导致了我的问题？它似乎不是 CORS 问题，我在那里没有收到任何错误。

Answer 1

您的主要问题是将异步/等待与 .then() 混用。您的响应拦截器没有返回下一个响应，因为您已经将该部分包装在 then() 中而没有返回外部承诺。

使用 async / await 让事情变得简单。

此外，设置 common headers 会破坏使用拦截器的意义。你已经有了一个请求拦截器，让它完成它的工作

// wait for this to complete
await store.dispatch("setUser", { user, refresh: true })

// your token is now in the store and can be used by the request interceptor
// re-run the original request
return Vue.prototype.$axios.request(originalRequest)

你的店铺操作也属于explicit promise construction antipattern，可以简化

async setUser({ dispatch, commit }, { user, refresh }) {
  if(user) {
    try {
      const token = await user.getIdToken(refresh);
      commit('SET_SESSION_TOKEN', token);
      try {
        const { data } = await this._vm.$axios.get('/api/user/session');
        commit('SET_SESSION_USER', data);
      } catch (err) {
        dispatch('logout');
        dispatch('setSnackbar', {
          color: "error",
          timeout: 4000,
          text: `Server unavailable: ${err.response?.data ?? err.message}`
        })
      }
    } catch (err) {
      dispatch('logout');
      dispatch('setSnackbar', {
        color: "error",
        timeout: 4000,
        text: `Unable to verify auth token. ${error}`
      })
    }
  } else {
    console.log('running logout');
    commit('SET_SESSION_USER', null);
    commit('SET_SESSION_TOKEN', null);
  }  
}

Vue Axios 拦截器响应 Firebase 401 令牌 Expired/Refresh（未定义）

Vue Axios Interceptor Response Firebase 401 Token Expired/Refresh (undefined)

interceptor

firebase

vue.js

axios

vuex