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

发布时间:2023年12月20日

axios全局配置

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

vue路由配置

1 hash模式

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

2 history模式

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

文章来源:https://blog.csdn.net/qyhua/article/details/135047985
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。