iot/projects/WebApp/wwwroot/main.js

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        accessToken: localStorage.getItem("accessToken"),
        refreshToken: localStorage.getItem("refreshToken"),
        user: null,
        products: [],
        nodes: [],
    },
    mutations: {
        setToken(state, data) {
            state.accessToken = data.accessToken;
            localStorage.setItem("accessToken", state.accessToken);
            state.refreshToken = data.refreshToken;
            localStorage.setItem("refreshToken", state.refreshToken);
        },
        logout(state) {
            state.accessToken = null;
            state.refreshToken = null;
            localStorage.removeItem('accessToken');
            localStorage.removeItem('refreshToken');
        },
        setUser(state, user) {
            console.log('~~~~');
            console.log(store);
            state.user = user;
        }
    },
})
///
var userAgent = navigator.userAgent;
var isApp = userAgent.indexOf('isapp') !== -1;
var hubUrl = "/IoTCenter/hub?group=page";
var connection = new signalR.HubConnectionBuilder().withUrl(hubUrl).build();
connection.on('Connected', function (id) {
    connectionId = id;
    console.log('signalR 连接Id:' + connectionId);
});
connection.on("ServerToClient", function (method, json, to, from) {
    console.log(method + ':' + json);
});
function connect() {
    if (connection.state === signalR.HubConnectionState.Disconnected) {
        connection.start().then(function () {
            console.log('signalR 连接成功');
        }).catch(function (err) {
            console.log(err);
            setTimeout(connect, 15 * 1000);
        });
    }
}

axios.interceptors.request.use(
    function (config) {
        if (config.url.indexOf('.html') === -1 && config.url.indexOf('getToken') === -1) {
            if (store.state.accessToken) {
                config.withCredentials = true;
                config.headers['x-requested-with'] = 'XMLHttpRequest';
                config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
                console.log('url:' + config.url + 'auth token:' + config.headers['Authorization']);
            }
        }
        $('#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);
    return response;
}, function (error) {
    console.log('拦截到返回错误:');
    console.log(error.response);
    if (error.response.status === 401 && error.config.url.indexOf('refreshToken') === -1) {
        var url = '/UserCenter/api/v1/token/refreshToken';
        var data = '"' + store.state.refreshToken + '"';
        axios.post(url, data, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })
            .then(function (response) {
                store.commit('setToken', response.data);
                error.config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
                console.log('刷新token后重发api请求');
                axios.request(error.config);
            })
            .catch(function (error) {
                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({
    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');
    },
    methods: {
    },
}).$mount('#app');