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 相关文章推荐
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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 strncasecmp字符串比较的小技巧
2011/01/04 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
实例Python处理XML文件的方法
2015/08/31 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python中的id()函数指的什么
2017/10/17 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
环境保护标语
2014/06/20 职场文书
促销活动总结怎么写
2014/06/25 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2014年采购工作总结
2014/11/20 职场文书
二审答辩状范文
2015/05/22 职场文书