Vue实现数据请求拦截
网络编程 2021-07-04 15:01www.168986.cn编程入门
这篇文章主要为大家详细介绍了Vue实现数据请求拦截,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue数据请求拦截的具体代码,供大家参考,具体内容如下
在src文件夹下创建utils文件夹
在文件夹下创建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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程