Question

我目前有VueJS组件对github进行ajax调用，如下所示：

（儿童）组件

Vue.http.get('user/repos').then((response) => {
    console.log(response);
}, (response) => {
    console.log(response);
});

问题是我首先需要获取访问令牌才能进行此ajax调用。此访问令牌存储在数据库中，因此我的主Vue组件正在进行ajax调用，以便为所有ajax调用设置公共标头：

主Vue实例

Vue.http.headers.common['Authorization'] = `token ${this.token}`;

const app = new Vue({
    el: '#app',

    data: {
      token: ''
    },

    created() {
        Vue.http.get('/token').then((response) => {
            this.token = response.data.token;
        }, () => {
            console.log('failed to retrieve the access token for the logged in user.');
        })
    }
});

在从组件运行ajax调用之前，我怎么能确定ajax调用设置＆＃39;授权＆＃39;标题已成功？

Answer 1

为可能受益的任何人添加此项。

从API调用中获取令牌，将其添加到vuex状态变量中。
使用子组件中的getter作为计算属性访问它，或者您可以将其作为props或通过事件总线传递，但这两种方式都不如使用vuex那样强大。

watch覆盖该属性，并在获取令牌时执行所需的操作。

// Add this up in the child component

   computed: {
     ...mapGetters({
        token: <name-of-the-getter> // token becomes the alias for the computed
     })                            // property.
   },

   watch: {
     token () {
       if(this.token) this.someAPICall()// or some other applicable condition
     }
   },

   methods: {
     ...mapActions({
       someAPICall: <name-of-the-action>
     })
   }

// ----------------------------------------------

Watch需要更改值，我注意到在操作中进行的提交会导致watch触发。因此，如果由于某种原因令牌丢失或过期，您自然无法做出后续请求。

修改

import store from 'path/to/store' axios.interceptors.response.use(function (response) { // extract the token from the response object // save the token to the store for access during subsequent // requests. return response; }, function (error) { // Do something with response error return Promise.reject(error); }); axios.interceptors.request.use(function (config) { // use store getters to access token return config; }, function (error) { // Do something with request error return Promise.reject(error); });

Answer 2

您可以使用自己的函数替换/ proxyfiy Vue.http.get函数，该函数将首先请求令牌然后执行您的请求，粗略的想法：

!function() 
{ 
  var vue_http_get = Vue.http.get;
  var token = null;

  // patching/proxying Vue.http.get function   
  Vue.http.get = function get() {
    vue_http_get.apply(Vue.http,"path/to/get/token/").then(function(resp){
      token = resp; 
      Vue.http.headers.common['Authorization'] = ...;
      // putting back original Vue.http
      Vue.http = vue_http_get;
      return Vue.http.get(arguments[0]);
    });
  }; 
}();

如何等待主Vue实例的ajax调用？

2 个答案: