给页面添加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 提示组件

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