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 相关文章推荐
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 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编程效率技巧
2015/08/13 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Python 的类、继承和多态详解
2017/07/16 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python处理中文标点符号大集合
2018/05/14 Python
python删除字符串中指定字符的方法
2018/08/13 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
这段代码难道不该打印出56吗
2013/02/27 面试题
医生进修自我鉴定
2014/01/19 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
节约用水演讲稿
2014/05/21 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python