在axios中的全局过滤器中怎么根据全局响应值动态的给当前页面添加某个组件

Question

在axios中的全局过滤器中怎么根据全局后端响应值动态的给当前页面添加某个组件

当前页面指-我不知道是哪个页面只要后端响应给我这个code值 我就在当前页面添加这个组件

userActivation是组件 收到后端响应值103和1002的时候显示这个组件代码如下:

import userActivation from 'userActivation'
import Vue form 'vue'
axios.interceptors.response.use(response => {
    let responseData = response.data
    switch(responseData.code) {
        case 103:
        case 1002:
            console.log(window.vue)
            Vue.component('user-activation', {
                template: "<button></button>"
            },)
            // vuerouter.replace("/userActivation")
            window.vue.$loading.close()
            throw SyntaxError()
            break
    }
    return responseData
}, error => {
    // 请求超时时让用户手动选择重连
    if('ECONNABORTED' === error.code) {
        window.vue.$loading.close()
        // window.vue.$Modal.alert({
        //     title: "请求超时",
        //     okText: "重试",
        //     onOk: () => {
        //         window.vue.$loading.show()
        //         return axios(error.config)
        //     }
        // })
        // throw SyntaxError()
    } else {
        // 占位 之后如果有需求在写
        switch(error.response.status) {
            case 403:
            case 404:
            case 500:
            case 503:
            case 504:
        }
        return Promise.reject(error)
    }
})

Answer 1

最后解决方案:

新建个registrationAward.js文件 引入想显示的组件

import Vue from 'vue';
import registrationAward from './registrationAward.vue'
let instance;
export default {
  show(options = {}) {
    if (!instance) {
      const Indicator = Vue.extend(registrationAward)
      instance = new Indicator().$mount(document.createElement('div'))
      document.body.appendChild(instance.$el)
    }
  }
};

axios中

import userActivation from 'userActivation'
import Vue form 'vue'
// 引入该js文件
import registrationAward from 'registrationAward'
axios.interceptors.response.use(response => {
    let responseData = response.data
    switch(responseData.code) {
        case 103:
        case 1002:
            // 显示该组件
            registrationAward.show()
            window.vue.$loading.close()
            throw SyntaxError()
            break
    }
    return responseData
}, error => {
    return Promise.reject(error)   
}
})

Answer 2

兄弟 你把组件用变量控制显示与否 接口的code再改这个变量

Answer 3

把事件报告给页面的根组件，然后根组件来显示。