当前位置:首页 > 编程教程 > vue技术文章 > vue axios登录请求拦截器

详解vue axios登录请求拦截器

  • 发布时间:
  • 作者:码农之家
  • 点击:126

这篇文章主要知识点是关于vue、axios、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js快速入门
  • 类型:Vue.js入门大小:26581 MB M格式:PDF作者:申思维
立即下载

vue axios登录请求拦截器

当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截。

1.安装配置axios

cnpm install --save axios 

我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下

import axios from 'axios' 
import { Indicator } from 'mint-ui'; 
import { Toast } from 'mint-ui'; 
// http request 拦截器 
axios.interceptors.request.use( 
  config => { 
    Indicator.open() 
    return config; 
  }, 
  err => { 
    Indicator.close() 
    return Promise.reject(err); 
  }); 
// http response 拦截器 
axios.interceptors.response.use( 
  response => { 
    Indicator.close() 
    return response; 
  }, 
  error => { 
    Indicator.close() 
  }); 
export default axios 

然后在main.js中引入这个js文件

import axios from './axio'; 
Vue.prototype.$axios = axios; 

这样就可以使用axios去请求了,在组件中可以用this.axios去调用

this.$axios({ 
    url:requestUrl+'homePage/v1/indexNewPropertiesResult', 
    method:'POST', 
   }).then(function(response){ //接口返回数据 
    console.log(response) 
    that.modulesArr=response.data.data.modules; 
//   that.getRecommendGoods(0); 
   }); 

只有用axios请求接口,才能去拦截,现在已经能在axios.js中拦截到了,可以在两个状态中做你需要的操作

补充:

axios使用拦截器统一处理所有的http请求

axios使用拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

•http request拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });

•http respones拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
 }, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
 });

•移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.581902

详解vue中axios请求的封装

axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库;封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发、测试、生产环境,前缀需要加以区分,我们利用node环境变量来作判断, if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://dev.xxx.com'} else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com'} 在localhost调试时,直接用开发地址一般都会有跨域的问题,所以我们还需要配置代理 本项目是vue cli3搭建的,代理配置是在vue.config.js文件中: module.exports = { devServer: { proxy: { '/proxyApi': { target: 'http://dev.x……

网友NO.754651

Vue Promise的axios请求封装详解

现在应该大部分公司都是前后端分离了。so,数据请求的封装还是必须的。 为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise这个对象。 var p1 = New promise((resolve,reject)={ var timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds.'); setTimeout(function () { if (timeOut 1) { log('call resolve()...'); resolve('200 OK'); } else { log('call reject()...'); reject('timeout in ' + timeOut + ' seconds.'); } }, timeOut * 1000);}) 其中resolve,reject就相当于是你定义了两个block,然后把数据传出去。 继续往下看,紧接着上面的代码 var p2 = p1.then(function (result) { //resolve 导出的数据 console.log('成功:' + result);});var p3 = p2.catch(function (reason) { //reject 导出的数据 console.log('失败:' + reason);}); 通过查阅资料还发现另外两种用法,Promise.all 和 Promise.race这两种。 var p1 = new Promise(function (resolve, reject) { setTimeout(re……

网友NO.615543

Vue 2.5.2下axios + express 本地请求404的解决方法

最近在学习Vue,今天尝试了使用axios模拟本地网络请求。使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中,接口请求应该这样写。 1、引入相关依赖 var axios = require('axios')const express = require('express');var app = express();var apiRoutes = express.Router();app.use('/api', apiRoutes); 2、处理网络请求 在之前的项目中,我们是在dev-server.js 这样处理接口访问 apiRoutes.get('/getList', function (req, res) { //处理网络请求}) 现在默认构建的项目工程是没有dev-server.js文件的,然后我们可以在webpack.dev.conf.js中添加ur。 before(app) { app.get('/api/getList', function(req, res) { //处理网络请求 }); }, 3、重新编译 npm run dev 此时,项目运行,接口就可以正常访问了。 以上这篇Vue 2.5.2下axios + express 本地请求404的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望……

网友NO.627312

vue+axios实现登录拦截的实例代码

一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。 准备你需要先生成自己的 Github Personal Token( 生成Token )。 Token 生成后 访问Demo,即可查看你的Repository List。 项目结构 .├── README.md├── dist // 打包构建后的文件夹│ ├── build.js│ └── build.js.map├── index.html├── package.json├── src│ ├── App.vue│ ├── assets│ │ ├── css.css│ │ ├── icon.css│ │ └── logo.png│ ├── constant│ │ └── api.js // 配置api接口文件│ ├── http.js // 封装fetch、post请求及http 拦截器配置文件│……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com