iot/projects/WebSPA/wwwroot/js/app.js

var userAgent = navigator.userAgent;
var isApp = userAgent.indexOf('isapp') !== -1;
var localStoreMsg = false; // 是否本地存储消息
/* API 网关 */
var apigateway = config.apigateway;
console.log('config:');
console.log(apigateway);

var isLoadedMSG = false;

/**
 * 异步请求拦截器
 * 前端网络请求封装统一处理
 */
axios.interceptors.request.use(
    //==========  所有请求之前都要执行的操作  ==============
    function (config) {
        if (config.url.indexOf('.html') === -1) {
            if (store.state.accessToken  && config.url.indexOf('getToken') === -1) {
                config.withCredentials = true;
                config.headers['x-requested-with'] = 'XMLHttpRequest';
                config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
                config.headers['X-APP-VERSION'] = '2.0.0';
                console.log('url:' + config.url + 'auth token:' + config.headers['Authorization']);
            }
            // 绝对路径替换为网关+路径 (防止多次请求重复拼接URL)
            config.url = config.url.indexOf('/') == 0 ? apigateway + config.url : config.url;
        }else{
            config.url += `?v=${version}`
        }
        // $('#loading').show(); 
        return config;
    },
    function (error) {
        console.log('axios.interceptors.request.error:');
        console.log(error);
        $('#loading').fadeOut(100);
        return Promise.reject(error);
    }
);

/**
 * 异步请求拦截器
 * 前端网络请求异常统一处理
 */
axios.interceptors.response.use(function (response) {
    console.log('axios.interceptors.response:');
    console.log(response);
    $('#loading').fadeOut(100);
    //根据config内容动态设置url
    
    return response;
}, function (error) {
    console.log('拦截到返回错误:');
    console.log(error);
    //==============  错误处理  ====================
    if (error && error.response) {
        switch (error.response.status) {
            case 400: error.message = '请求错误(400)'; break;
            case 401: error.message = '未授权，请重新登录(401)'; break;
            case 403: error.message = '拒绝访问(403)'; break;
            case 404: error.message = '请求出错(404)'; break;
            case 408: error.message = '请求超时(408)'; break;
            case 500: error.message = '服务器错误(500)'; break;
            case 501: error.message = '服务未实现(501)'; break;
            case 502: error.message = '网络错误(502)'; break;
            case 503: error.message = '服务不可用(503)'; break;
            case 504: error.message = '网络超时(504)'; break;
            case 505: error.message = 'HTTP版本不受支持(505)'; break;
            default: error.message = `连接出错(${err.response.status})!`;
        }
    } else {
        err.message = '连接服务器失败!'
    }
    if (error.response.status === 401 && error.config.url.indexOf('refreshToken') === -1) {
        var url = '/UserCenter/api/v1/token/refreshToken';
        var data = '"' + store.state.refreshToken + '"';
        /**
         * 刷新Token
         */
        axios.post(url, data, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })
            .then(function (response) {

                localStorage.setItem('accessToken', response.data.accessToken);
                localStorage.setItem('refreshToken', response.data.refreshToken);

                store.commit('setToken', response.data);
                error.config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
                console.log('刷新token后重发api请求');
                /* 重新发送原请求 */
                delete error.config.headers.Authorization //移除旧的AccessToken信息，避免拦截器无法设置新AccessToken
                axios.request(error.config);
            })
            .catch(function (error) { // 如果为RefreshToken失败则跳转登录页面 
                if (error.response.status === 401) {
                    console.log('refreshToken 已过期');
                    router.push('/pages/login');
                }
            });
    }
    $('#loading').fadeOut(100);
    return Promise.reject(error);
});
///
const routes = [
];
var routeList = routes.concat();
const router = new VueRouter({
    //mode: 'history',
    routes
});
router.beforeEach((to, from, next) => {
    $('#loading').show();
    console.log('before...')
    console.log('store.state.accessToken', store.state.accessToken)
    console.log('to.path', to.path)
    if (!store.state.accessToken && to.path !== '/pages/login') {
        console.log('router.push')
        router.push('/pages/login');
        return;
    }
    if (store.state.accessToken) {
        connect();
    }
    var route;
    for (var i = 0; i < routeList.length; i++) {
        if (routeList[i].path === to.path) {
            route = routeList[i];
        }
    }
    console.log('route', route)
    if (!route) {
        console.log('<<<!route to.path>>>', to.path)
        var path = to.path === '/' ? '/pages/home' : to.path;

        var url = path + '.js';
        var method = path.replace(/\//g, '_').substr(1) + "()";
        console.log('preRoute:from ' + from.path + ' to path ' + to.path);
        $.getScript(url, function () {
            var response = eval(method);
            var route = {
                path: to.path,
                component: response.component,
                meta: { onMessage: response.onMessage } 
            };
            router.addRoutes([route]);
            routeList.push(route);
            router.push(to.fullPath);
        });
    }
    else {
        console.log('!route else', route)
        console.log('route from:' + from.path + ' to:' + to.path);
        next();
    }
});
router.afterEach((route, redirect) => {
    Vue.nextTick(() => {
        $('#loading').fadeOut(100);
    })
})

// 人人通原生返回键回调
var onReturnBack = function (){
    if(window.api){
        window.api.execScript(
            {
                name: window.api.winName,
                script: "api.closeWin()"
            }
        )
    }
}

window.addEventListener("popstate", function(e) {
    $('.weui-header a.weui-header-left')[0].click();
}, false);

// indexedDB兼容
var indexedDB = window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB || null;

if(indexedDB){
    console.log('支持');
}else{
    console.log('不支持');
}

console.log(indexedDB);
var db = null;
var request = indexedDB.open('app', 1);
request.onupgradeneeded = function(e) {
    db = e.target.result;
    if (!db.objectStoreNames.contains('message')) {
        var objectStore = db.createObjectStore('message', { keyPath: '_id', autoIncrement: true });
    }
    console.log("数据库创建成功");
}
request.onsuccess = function() {
    db = request.result;
    console.log("数据库打开成功");
    /**
     * 初始化消息列表
     */
    console.log('loading message');
    //loadMessage();
}

function saveMessage(msg){
    if(db){
        console.log("数据库打开");
        console.log(db);
        var transaction = db.transaction('message','readwrite'); 
        var objectStore = transaction.objectStore('message');
        console.log("数据:");
        console.log(msg);
        console.log("类型:");
        var jsonMsg = JSON.parse(msg);
        console.log(typeof JSON.parse(msg));
        // 校验数据格式(当前只存储带key的消息，后续会有调整)
        if( jsonMsg.key ){
            console.log('IS MSG');
            // 本地存储
            if(localStoreMsg){
                objectStore.add({data: jsonMsg});
            }            
            // objectStore.delete(store.state.messages[0]._id);
            store.commit('setMessages', [{data: jsonMsg}]);
        }        
    }else{
        console.log("数据库未打开");
    }
}

function loadMessage(callback, limit = 10){
    if(db){
        console.log("数据库打开");
        console.log(db);
        var transaction = db.transaction('message','readwrite'); 
        var objectStore = transaction.objectStore('message');
        console.log('objectStore:')
        console.log(objectStore);
        var req = objectStore.openCursor();
        console.log('req:')
        console.log(req);
        var items = [];
        // 回调会被多次调用
        req.onsuccess = function (evt) {
            var cursor = evt.target.result;
            console.log('cursor:')
            console.log(cursor);
            if(cursor){ // 必要检查
                var item = cursor.value;
                //console.log(item);
                if(item.data.device){
                    items.push(item);
                    console.log('append item !!!');
                    //console.log(items);
                    console.log('####### item #######');
                    console.log('displayName: ' + item.data.device.displayName);
                    console.log('Name: ' + item.data.name);
                    console.log('Value: ' + item.data.value);
                }

                cursor.continue(); // 移动到下一项
            }else{
                // 回调函数
                console.log('call back!!!');
                callback(items);
                // 加载后删除数据库，只缓存上次应用开启数据
                //indexedDB.deleteDatabase('app');
                objectStore.clear();
                //alert(items.length -100)
            }

        };

        console.log(limit);
        var req = objectStore.get(limit);
        req.onerror = function(event) {
            console.log('事务失败');
        };

    }else{
        console.log("数据库未打开");
    }
}

///
const app = new Vue({
    store: store,
    router,
    data: {
    },
    mounted: function () {
        console.log('mounted:app');
        // 判断是否登录
        if(localStorage.getItem('accessToken') === null){
            // 
            router.push({path:'/pages/login'})
        }
    },    
    destroyed: function(){
        alert('des');
    },
    methods: {
    },
}).$mount('#app');