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工程师9 分钟前
迭代器实现简单演示:斐波拉契取值
前端
simple丶10 分钟前
Elpis 服务端引擎
前端
黄天才丶10 分钟前
高级前端篇-性能优化(这一篇就够了!w字长文,持续更新中)
前端
章鱼小丸子逃跑中13 分钟前
若依RuoYi-Cloud-Plus微服务版(完整版)前后端部署
java·前端·后端·微服务
qipao15 分钟前
马拉车算法Kimi详解(js版)
前端·算法
小彭SG16 分钟前
5年前端机缘巧合做起鸿蒙开发,你也要来吗?
前端·harmonyos
~废弃回忆 �༄22 分钟前
CSS中绝对定位
前端·css·css中绝对定位
best66633 分钟前
Monorepo 全解析:概念、价值、选择与实践(Vue3方式)
前端·架构
Eliauk__38 分钟前
Vue 事件绑定深入解析:@click="func" vs @click="func()"
前端·vue.js·面试
用户21411832636021 小时前
dify案例分享-deepseek赋能从 Excel 表格到统计图,一键生成代码不是梦
前端