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 GridPanel 根据条件改变字体颜色
Mar 08 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
node.js文件上传处理示例
Oct 27 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 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
几种显示数据的方法的比较
2006/10/09 PHP
php session和cookie使用说明
2010/04/07 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php生成zip文件类实例
2015/04/07 PHP
php上传图片类及用法示例
2016/05/11 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
关于Python数据结构中字典的心得
2017/12/04 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
出国留学计划书
2014/04/27 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
小学中队委竞选稿
2015/11/20 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书