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 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
vue axios整合使用全攻略
May 24 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 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初学者们头痛的十四个问题
2007/01/15 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
React实现轮播效果
2020/08/25 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
Python中http请求方法库汇总
2016/01/06 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Django 重写用户模型的实现
2019/07/29 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
科技活动周标语
2014/10/08 职场文书
单位婚育证明范本
2014/11/21 职场文书
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技