在某些情况下,有时候会在接口请求的API中需要拿到存在浏览器中的COOKIE,调用的方式可以为:

// 获取浏览器Cookie
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = ; i <ca.length; i++) {
var c = ca[i];
while (c.charAt() == ' ') {
c = c.substring();
}
if (c.indexOf(name) == ) {
return c.substring(name.length, c.length);
}
}
return "";
}

在axios请求中,需要在发送前和发送后进行简单的设置拦截:

// 添加一个响应拦截器
Axios.interceptors.request.use((config) => {
let account = sessionStorage.account;
let token = sessionStorage.token;
// if(config.url == Axios.bullRanking){
// // config.headers['Authorization'] = 'Bearer';
// }else{
// config.headers['Authorization'] = 'Bearer ' + token;
// }
config.headers['Authorization'] = 'Bearer ' + token
// config.headers['Accept'] = 'application/json'
// config.headers['account'] = account;
//在发送请求之前做某件事
// 判断是否登录
// let cur_id = "cur_id",
// sign = "sign";
// if (!cur_id||!sign) {
// localStorage.clear();
// window.location.href = "index.html";
// }; // 给手机验证码接口加mcode
// if(config.url == Axios.send_sms){
// if(sessionStorage.mcode){
// var mcode = sessionStorage.mcode
// config.data.mcode = mcode
// }
// } if(config.url)
if(config.method === 'post'){
config.data = qs.stringify(config.data);
config.data = config.data+"&account=" + account;
config.headers['locale'] = getCookie('language')=='Chinese'?'zh-CN':'en';
config.headers['from'] = 'pc';
}
if(config.method === 'get'){
config.headers['locale'] = getCookie('language')=='Chinese'?'zh-CN':'en';
config.headers['from'] = 'pc';
}
return config;
},(error) =>{
_.toast("错误的传参", 'fail');
return Promise.reject(error);
}); // 添加返回信息验证
Axios.interceptors.response.use(function (response) {
if(response.data.status =='' || response.data.status ==''){
if(!sessionStorage.account){
return false;
}
sessionStorage.clear();
if (process.env.NODE_ENV === 'production') {
window.location.href = "/wap/#/login";
} else {
window.location.href = "/#/login";
} }
// console.log(sessionStorage.account)
if(response.data.status =='' || response.data.code ==''){
Vue.prototype.resetSetItem('watchStorage', 'false');
// sessionStorage.setItem("watchStorage", 'false'); // console.log(123)
if(window.location.hash !='#/home'&&window.location.hash !='#/XXXX'){
Message({
showClose: true,
message: response.data.msg,
type: "error"
});
window.location.href = "#/Login"; return
} }
return response;
}, function (error) {
return Promise.reject(error);
});

其中的

Vue.prototype.resetSetItem('watchStorage', 'false');

是全局封装的监听sessionStorage变化的。

axios 拦截以及 API简单配置(element)的更多相关文章

  1. Docker remote API简单配置使用

    1.启动docker remote API的方式如下: docker -d -H uninx:///var/run/docker.sock -H tcp://0.0.0.0:5678 2.但是为了伴随 ...

  2. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  3. Axios拦截器配置

    Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 ...

  4. vue+vux-ui+axios+mock搭建一个简单vue框架

    1.首先感谢同事 2.之前一直在做angularjs的项目,目前vue火热,所以自己搭建了一个的vue框架,在此作为记录 vue+vux-ui这里就不介绍了,有很多博客都写的很详细了. 下面简单记录下 ...

  5. vue请求简单配置

    简单记录一下vue的http请求配置相关 测试环境请求接口设置: 1.  config/dev.env.js添加: module.exports = merge(prodEnv, { NODE_ENV ...

  6. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  7. axios拦截器搭配token使用

    在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...

  8. Vue-cli3.x中使用Axios发送跨域请求的配置方法

    Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...

  9. 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +

    (1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...

随机推荐

  1. maven联通网络下中央仓库不能访问的解决办法

    最近刚开始学习maven工具,下载解压完毕,环境变量配置完毕,运行如下命令尝试快速构建一个maven项目: mvn archetype:generate 结果就有问题: [INFO] Scanning ...

  2. Apache 的 httpd.conf 配置文件

    http.conf 是 Apache 的配置文件,Apache 的常见配置主要是通过修该文件实现的,修改之后需要 重启 Apache 服务生效. Httpd.conf #Apache 安装目录 Ser ...

  3. 【转】linux lost+found文件夹

    lost+found这个目录一般情况下是空的,当系统非法关机后,如果你丢失了一些文件,在这里能找回来 用来存放fsck过程中部分修复的文件的 如果你运行fsck命令(文件系统检查和修复命令),它也许会 ...

  4. PAT Advanced 1027 Colors in Mars (20 分)

    People in Mars represent the colors in their computers in a similar way as the Earth people. That is ...

  5. PAT Basic 1028 人口普查 (20 分)

    某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的——假设已知镇上没有超过 200 岁的老人,而今天是 2014 ...

  6. mysql 数据库url

    jdbc:mysql://localhost:3306/database?useUnicode=true&useJDBCCompliantTimezoneShift=true&useL ...

  7. FCC 成都社区·前端周刊 第 8 期

    01. 2018 前端开发者手册 这是一份 2018 前端开发手册,内容包括三个部分:前端工程实践.前端开发学习和前端开发工具. 详情:https://frontendmasters.com/book ...

  8. Django【第6篇】:Django之ORM单表操作(增删改查)

    django之数据库表的单表查询 一.添加表记录 对于单表有两种方式 # 添加数据的两种方式 # 方式一:实例化对象就是一条表记录 Frank_obj = models.Student(name =& ...

  9. Java语言Lang包下常用的工具类介绍_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 无论你在开发哪中 Java 应用程序,都免不了要写很多工具类/工具函数.你可知道,有很多现成的工具类可用,并且代码质量都 ...

  10. MySQL数据库1初识MySQL

    目录 Mysql 一.数据库是什么? 二.为啥使用数据库?(*****) 三.数据库的分类(*****) 1.关系型数据库 2.非关系型数据库 3.关系型与非关系型区别: 四.数据库MySQL的架构 ...