token过期，js唤起重新登录弹窗

1新建一个文件夹reload,存放index.js文件以及index.vue文件

index.vue 中放置自己所要弹出框页面

<template>
  <el-dialog
    title="提示"
    :visible.sync="loseEfficacyModal"
    width="280px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :append-to-body="true"
    :show-close="false"
    align="center"
    top="30vh"
  >
    <div slot="title"></div>
    <img src="@/assets/svg/shixiao.svg" />
    <div class="tips_text">身份信息失效，请重新登录</div>
    <div class="fotter_btn">
      <el-button class="btn2" size="small" @click="reset">重新登录</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 引入element组件 在js引用的时候 全局标签还未挂载
import { Dialog, Button } from "element-ui"; 
import Vue from "vue";
Vue.use(Dialog);
Vue.use(Button);
import store from "@/store";
export default {
  data() {
    return {
      loseEfficacyModal: false,
    };
  },
  methods: {
    onShow() {
      this.loseEfficacyModal = true;
    },
    reset() {
      store.dispatch("logout").then(() => {
        this.loseEfficacyModal = false;
        this.$message.success("退出成功");
      });
    },
    handleClose() {
      this.loseEfficacyModal = false;
    },
  },
};
</script>

index.js 在index引入index.vue

import reloadComponent from './index.vue'

const LoadingConstructor = Vue.extend(reloadComponent)

const instance = new LoadingConstructor({
	el: document.createElement('div')
})

instance.show = false // 默认隐藏
const reload = {
	show () { 
        //调用index.vue显示(关键点)
		instance.onShow(this)
		instance.show = true
		document.body.appendChild(instance.$el)
	},
	hide () { // 隐藏方法
		instance.show = false
	}
}

export default reload

2.在请求接口的地方引入

requset.js

// 引入文件夹，文件夹直接指向的index.js
import reloadPlg from '@/components/reload'
// 在接口返回的response 编写在借口401的时候调用（根据这自己公司后端定义的接口来判断）
  if (data.code === '401') {
      reloadPlg.show()
   }

最终效果