给SPA项目的页面统一添加token失效弹框

在混合App内嵌的h5页面，token失效后，提示须要从新登陆，点击肯定跳转至App的登陆页面
一个很实用的场景（在手机浏览器web端也大同小异，原理都是同样的）

使用时失效了

拦截器统一处理，当收到token失效的错误码时，显示“您的帐号登陆已过时，或者密码已被修改，请从新登陆”的弹框
http.js

http.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response) {
        /* 
          返回 3002 表示前端的token已失效
          页面跳转到登录页
        */
        if (error.response.status == 500 && error.response.data.error == 3002) {
            // console.log("token失效了");
            sessionStorage.setItem("relogin", "true");
            // 弹出请从新登陆的弹框
            Vue.prototype.$dialog({
                content: "您的帐号登陆已过时，或者密码已被修改，请从新登陆",
                justAlert: true,
                sureBtnText: "肯定"
            }).then(res => {
                if (res) {
                    console.log("点击肯定后执行的app端的回调");
                }
            })

        }
    }
   return Promise.reject(error) //返回接口返回的错误信息
});

Dialog.vue 提示组件

<template>
    <div>
        <a-mask v-if="settings.showMask" v-show="isShow"></a-mask>
        <transition>
            <div class="dialog" v-show="isShow">
                <div class="dialog-title" v-if="settings.title">{{settings.title}}</div>
                <div class="dialog-context">{{settings.content}}</div>
                <div class="dialog-botton">
                    <!-- 设置只有确认按钮 -->
                    <span class="dialog-cancel" v-if="!settings.justAlert" @click="cancel">{{settings.cancelBtnText}}</span>
                    <span class="dialog-sure active" @click="sure">{{settings.sureBtnText}}</span>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import aMask from "./Mask"
export default {
    name: 'Dialog',
    props: {
        config: {
            type: Object,
            default: function() {
                return {};
            }
        }
    },
    data() {
        return {
            isShow: false,
        }
    },
    computed: {
        // 使用config传入组件配置
        // settings是将默认设置和用户设置获得的最终设置值，将默认设置与用户配置项对象合并获得
        settings: function() {
            return Object.assign({
                    showMask: true, //是否显示蒙版
                    title: "", //标题。不设置则无标题
                    content: "弹框内容", //主体内容
                    justAlert: false,  //true,相似aler形式只有一个按钮，false dialog的形式有两个按钮
                    cancelBtnText: "取消",
                    sureBtnText: "确认"
                }, this.config)
        }
    },
    components: {
        aMask
    },
    methods: {
        show: function() {
            this.isShow = true;
        },
        //close方法只作取消当前弹窗功能
        cancel: function() {
            this.isShow = false;
            this.$emit("close");
        },
        //点击肯定的时候向父组件发射事件函数
        sure: function() {
            this.isShow = false;
            this.$emit("sure");
        }
    },

}
</script>
<style scoped lang="scss">
.dialog {
    z-index: 6;
    width: 75%;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 12%;
    font-size: 32px;
    border-radius: 25px;
}

.dialog-context{
    padding: 70px 38px 52px;
    text-align: center;
    color: rgba(74, 74, 74, 1);
    line-height: 42px;
    border-bottom: 2px solid #DDDDDD;
}

.dialog-botton {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    text-align: center;
    color: #3e78c4;
}

.dialog-cancel{
    border-right: 2px solid #DDDDDD;
    color: rgba(128, 128, 128, 1);
}

.dialog-botton span {
    flex:1;
    padding: 30px 0;
}
</style>

Dialog.js

import DialogView from '../../components/Dialog.vue'
// import Vue from 'vue'
 
let Dialog = {};
 
Dialog.install = function (Vue, options) {
 
    const DialogViewConstructor = Vue.extend(DialogView)
 
    // 生成一个该子类的实例
    const instance = new DialogViewConstructor();
    Vue.prototype.$dialog = (config)=>{
 
        // 这里 return 一个 Promise 
        // 在项目中使用的时候，就能够进行链式调用了~
        return new Promise((resolve,reject)=>{
 
            instance.config = config;
            console.log(instance.config);
 
            instance.isShow = true;
 
            instance.sure = ()=>{
 
                instance.isShow = false;
 
                resolve(true)
 
            }
 
            instance.cancel = ()=>{
 
                instance.isShow = false;
 
                resolve(false)
 
            }
 
        })
 
    }
    // 将这个实例挂载在我建立的div上
    // 并将此div加入全局挂载点内部
    instance.$mount()
    document.body.appendChild(instance.$el)
}

export default Dialog;

最后必定要记得在main.js引用

// 引入token提示弹框插件
import Dialog from "./modules/plugins/Dialog.js";
Vue.use(Dialog);