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 相关文章推荐
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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数组去重复数据示例
2014/02/25 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
获取url中用&隔开的参数实例(分享)
2017/05/28 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
python实现将内容分行输出
2015/11/05 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
Python中正则表达式详解
2017/05/17 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
python实现多线程端口扫描
2019/08/31 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
四风问题查摆材料
2014/08/25 职场文书
团队拓展训练感想
2015/08/07 职场文书
高中地理教学反思
2016/02/19 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
Java版 单机五子棋
2022/05/04 Java/Android
python双向链表实例详解
2022/05/25 Python