iot/projects/WebUI/wwwroot/js/app.js

var userAgent = navigator.userAgent;
var isApp = userAgent.indexOf('isapp') !== -1;
/* API 网关 */
var apigateway = config.apigateway;
console.log('config:');
console.log(apigateway);

/**
 * 异步请求拦截器
 * 前端网络请求封装统一处理
 */
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;
        }
        $('#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.response);
    //==============  错误处理  ====================
    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();
    if (!store.state.accessToken && to.path !== '/pages/login') {
        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];
        }
    }
    if (!route) {
        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 route = {
                path: to.path,
                component: eval(method),
            };
            router.addRoutes([route]);
            routeList.push(route);
            router.push(to.fullPath);
        });
    }
    else {
        console.log('route from:' + from.path + ' to:' + to.path);
        next();
    }
});
router.afterEach((route, redirect) => {
    Vue.nextTick(() => {
        $('#loading').fadeOut(100);
    })
})
///
const app = new Vue({
    store: store,
    router,
    data: {
    },
    mounted: function () {
        console.log('mounted:app');
        if(localStorage.getItem('userInfo') === null){
            router.push({path:'/pages/login'})
        }
    },
    methods: {
    },
}).$mount('#app');