import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import dataV from '@jiaminghi/data-view'; // 引入全局css import './assets/scss/style.scss'; import 'element-ui/lib/theme-chalk/index.css'; // 按需引入vue-awesome图标 import Icon from 'vue-awesome/components/Icon'; import 'vue-awesome/icons/chart-bar.js'; import 'vue-awesome/icons/chart-area.js'; import 'vue-awesome/icons/chart-pie.js'; import 'vue-awesome/icons/chart-line.js'; import 'vue-awesome/icons/align-left.js'; //引入echart //4.x 引用方式 import echarts from 'echarts' import ElementUI from 'element-ui'; import Cookies from 'js-cookie' //5.x 引用方式为按需引用 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式 //import * as echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.config.productionTip = false; Vue.prototype.$cookie = Cookies; // 全局注册 Vue.component('icon', Icon); Vue.use(dataV); Vue.use(ElementUI); router.beforeEach((to, from, next) => { /** * 未登录则跳转到登录页 * 未登录跳转到登录页,也可以通过axios的响应拦截器去实现,但是会先在当前页面渲染一下,再跳转到登录页,会有个闪动的现象 * 这里通过路由守卫的方式,不会在当前页闪现一下,但是需要在每个路由组件添加一个是否需要登录的标识位,如本项目中的requireAuth字段 */ if (to.matched.some((auth) => auth.meta.requireAuth)) { let token = sessionStorage.getItem("x-access-token"); if (token && token != undefined) { next(); } else { next({ path: "/login" }); } } else { next(); } }); new Vue({ router, store, render: (h) => h(App), }).$mount('#app'); import axios from 'axios'; //把方法放到vue的原型上,这样就可以全局使用了 Vue.prototype.$http = axios.create({ //设置20秒超时时间 timeout: 20000, baseURL: '/mes', //这里写后端地址http://localhost:8099/uas/ https://mes.ubtob.net:8099/mes/ }); Vue.prototype.$http.interceptors.request.use(config => { //为请求头添加x-access-token 字段为服务端返回的token if(sessionStorage.getItem('x-access-token')) { config.headers['x-access-token'] = sessionStorage.getItem('x-access-token'); } if(config.params && config.params['condition']) { //console.log(sessionStorage.getItem('li_code')); } return config; }); // response interceptor 响应拦截 //token,一般是在登录完成之后,将用户的token通过localStorage或者cookie存在本地, // 然后用户每次在进入页面的时候(即在main.js中),会首先从本地存储中读取token,如果token存在说明用户已经登陆过, // 则更新vuex中的token状态。然后,在每次请求接口的时候,都会在请求的header中携带token, // 后台人员就可以根据你携带的token来判断你的登录是否过期,如果没有携带,则说明没有登录过。 // 添加响应拦截器 /*Vue.prototype.$http.interceptors.response.use(function (response) { if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, function (error) { // 对响应错误做点什么 if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面,并携带当前页面的路径 // 在登录成功后返回当前页面,这一步需要在登录页操作。 case 500: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); break; // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: this.$message({ message: '登录过期,请重新登录', duration: 1000, type: 'success' }); // 清除token localStorage.removeItem('token'); store.commit('loginSuccess', null); // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面 setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); }, 1000); break; // 404请求不存在 case 404: this.$message({ message: '网络请求不存在', duration: 1500, type: 'success' }); break; // 其他错误,直接抛出错误提示 default: this.$message({ message: error.response.data.message, duration: 1500, type: 'success' }); } return Promise.reject(error.response); } });*/