vue 项目axios全局配置与路由模式配置

qyhua2023-12-22 19:48

axios全局配置

vue项目的一般都会用axios作为http请求，如果是后台管理之类的项目往往会涉及权限或者全局异常处理配置，下面是配置axios全局拦截器的示例代码（main.js文件）

javascript 复制代码

//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
    },
]
});

vue路由配置

1 hash模式

路由默认模式是hash模式，hash模式的关键原理是onhashchange事件，无需向后端发起请求，浏览器可以监听Hash值的变化，并按规则加载相应的代码。Hash值的变化会被浏览器记录，实现页面的前进和后退功能,但url地址会有#号符，可能能些人会感觉不美观。

2 history模式

history模式的URL中没有#符号，采用传统的路由分发模式，即用户输入URL时，服务器接收请求并解析URL，然后进行相应的逻辑处理，也就说所有的页面切换都经过了后台，后台服务器资源相对比hash相对消耗，不过没有太大的访问量也体现不出那点差距。