給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);