vue项目的一般都会用axios作为http请求,如果是后台管理之类的项目往往会涉及权限或者全局异常处理配置,下面是配置axios全局拦截器的示例代码(main.js文件)
//main.js
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import Util from './libs/util';
import axios from 'axios';
import cacheUtil from './libs/cache_util';
import cfg from './libs/server_config.js';
axios.defaults.baseURL = cfg.baseUrl;
axios.defaults.method = 'post';
axios.interceptors.request.use(
config => {
let u_token = cacheUtil.getCache('u_token');
if (u_token != null) {
config.headers['Authorization'] = u_token;
}
return config;
}, function (error) {
return Promise.reject(error);
}
);
axios.interceptors.response.use(function (response) {
// 请求未授权
if (response.data.ret_code === 401) {
return Promise.reject(response);
} else if (response.data.ret_code !== 200) {
iView.Notice.error({title: '请求出错! 错误码: ' + response.data.ret_code, desc: response.data.ret_msg});
if (response.data.ret_msg === "session 失效,请重新登陆!") {
// 退出登录
router.push({
name: 'login'
});
}
return Promise.reject(response);
}
return response.data.data;
}, function (error) {
console.log(error);
iView.Notice.error({title: '请求出错! ', desc: '网络连接失败!'});
return Promise.reject(error);
});
Vue.prototype.$axios = axios;
//配置路由
export default new Router({
base: 'page',
mode: 'history', //这里配置路由的模式
routes: [
{
path: '/login',
name: 'login',
component: login
},
]
});
? ? ? ? ? ? ? 路由默认模式是hash模式,hash模式的关键原理是onhashchange事件,无需向后端发起请求,浏览器可以监听Hash值的变化,并按规则加载相应的代码。Hash值的变化会被浏览器记录,实现页面的前进和后退功能,但url地址会有#号符,可能能些人会感觉不美观。
?
? ? ? ? ? ?history模式的URL中没有#符号,采用传统的路由分发模式,即用户输入URL时,服务器接收请求并解析URL,然后进行相应的逻辑处理,也就说所有的页面切换都经过了后台,后台服务器资源相对比hash相对消耗,不过没有太大的访问量也体现不出那点差距。
?