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

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相对消耗,不过没有太大的访问量也体现不出那点差距。

相关推荐
C_V_Better12 分钟前
浏览器缓存机制:JavaScript 文件缓存导致 404 错误的解决方案
开发语言·前端·javascript·缓存
小救星小杜、16 分钟前
a = b &&c 的含义
开发语言·前端·javascript
uhakadotcom17 分钟前
Babylon.js:轻松打造Web 3D体验
前端·javascript·面试
parade岁月18 分钟前
告别代码质量隐患:Husky 生态工具链在前端工程化中的实战应用
前端·javascript
小成C19 分钟前
为什么会演化出RSC,SSR和RSC关系大解密
前端·react.js
过期的H2O220 分钟前
【H2O2 | 软件开发】Axios发送Http请求
前端·http·axios·交互
bug总结26 分钟前
vue3 public下引入图片路径打包后线上不显示问题解决
前端·javascript·vue.js
悠然青年帅29 分钟前
基于Vue+Canvas实现的画板绘画以及保存功能
前端
screct_demo32 分钟前
详细讲一下 Webpack 主要生命周期钩子流程(重难点)
前端·webpack·node.js
小妖66633 分钟前
vue2的webpack(vue.config.js) 怎么使用请求转发 devServer.proxy
javascript·vue.js·webpack