Vue实现数据请求拦截


Posted in Javascript onOctober 23, 2019

本文实例为大家分享了vue数据请求拦截的具体代码,供大家参考,具体内容如下

在src文件夹下创建utils文件夹

Vue实现数据请求拦截

同时在文件夹下创建request.js和auth.js文件

request.js为请求拦截、请求数据封装主入口
auth.js为设置token和删除token及判断用户是否登录封装主入口 

auth.js (封装token)

export function isLogin() {
  if (localStorage.getItem('token')) {
   return true;
  } else {
   return false;
  }
 }
 export function getToken() {
  return localStorage.getItem('token');
 }
 export function setToken(token) {
  localStorage.setItem('token', token);
 }
 
 export function removeToken() {
  localStorage.removeItem('token');
 }

下载axios(命令: npm install axios --save-dev)、同时引入axios、getToken

import axios from 'axios';
import { getToken } from './auth';

创建实例:传两个参数(timeout(超时时间)、baseUrl(服务器路径))

const instance = axios.create({
   timeout: 5000,
   baseURL: 'https://xxxxxxxxx/xxxx/',
 });

请求拦截

// 请求拦截
 instance.interceptors.request.use(
  function(config) {
   // eslint-disable-next-line prettier/prettier
   config.headers.authorization = 'Bearer ' + getToken();
   return config;
  },
  function(error) {
   // Do something with request error
   return Promise.reject(error);
  }
 );
 
 instance.interceptors.response.use(
  response => {
   return response;
  },
  error => {
   if (error.response.status == 401) {
    window.location.href = '/#/login';
   }
   if (error.response.status == 404) {
    window.location.href = '/404.html';
   }
   return Promise.reject(error.response.data);
  }
 );

请求封装

/**
  * 获取数据 get请求
  * @param {*} url
  * @param {*} config
  */
 export const get = (url, config) => instance.get(url, config);
 
 /**
  * post请求
  * @param {*} url
  * @param {*} data
  * @param {*} config
  */
 export const post = (url, data) => instance.post(url, data);
 /**
  * put
  * @param {*} url
  * @param {*} data
  * @param {*} config
  */
 export const put = (url, data, config) => instance.put(url, data, config);
 
 /**
  * delete
  * @param {*} url
  * @param {*} config
  */
 export const remove = (url, config) => instance.delete(url, config);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 #Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 #Javascript
原生JS无缝滑动轮播图
Oct 22 #Javascript
Vue实现开心消消乐游戏算法
Oct 22 #Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 #Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 #Javascript
微信小程序开发之转发分享功能
Oct 22 #Javascript
You might like
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php header功能的使用
2013/10/28 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python实现按首字母分类查找功能
2019/10/31 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
党校培训自我鉴定
2014/02/01 职场文书
清扬洗发水广告词
2014/03/14 职场文书
欢迎横幅标语
2014/06/17 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
美丽人生观后感
2015/06/03 职场文书
教务处教学工作总结
2015/08/10 职场文书
六年级作文之预言作文
2019/10/25 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python