vue 请求拦截器配置

按如下步骤进行

1.request.js内容：http request请求拦截器和http response服务器响应拦截器配置

请求拦截器有一个Authorization认证,判断登录状态之后再决定是否需要请求数据：

vue http请求 Authorization认证判断登录状态请求数据_CCKing7的博客-CSDN博客

2.http.js内容：请求数据方式封装

3.utils.js内容：获取token，判断token是否存在

4.store文件：

vuex 仓库配置

1.vuex 持久化

2.vuex 模板引用

5.接口的封装

request.js内容

http request请求拦截器和http response服务器响应拦截器配置

// http request 请求拦截器，有token值则配置上token值
import axios from 'axios'
import Promise from 'promise'
import util from './utils';
import store from './../store/index';
const service = axios.create({timeout: 60000, // 请求超时时间headers: {// Authorization: Authorization,'Content-Type': 'application/json;charset=UTF-8'}
});// http请求拦截器
service.interceptors.request.use(config => {let tokenExist = util.tokenExist();if (tokenExist) {// bus.$emit('toggleloading', true)//显示loading//如果token存在config.headers['Authorization'] = `Bearer ${util.getToken()}`;}// Toast.loading({//     message: '加载中...',//     duration: 0,//     forbidClick: true// });return config;},error => {Promise.reject(error);}
)// http response 服务器响应拦截器，
// 这里拦截401错误，并重新跳入登页重新获取token
service.interceptors.response.use(response => {if (response.status === 200) {//通讯成功// Toast.clear();/************** response.data.status === 0 错误* response.data.status === 100 成功* response.data.status === 401 token过期** *************/// bus.$emit('toggleloading', false)//隐藏loadingif (response.data.state === 401) {//如果是token过期，跳转至登录Message.error("登录已过期，请重新登录！");store.commit('SET_TOKEN', '');util.goLogin();} else if (response.data.state === 0) {// Message.error(response.data.message);return response.data;} else {return response.data;}}},error => {//请求失败// ;const response = error.response;if (response.status === 401) {// Toast.fail(response.data.message);Message.error("登录已过期，请重新登录！");util.goLogin();} else if (response.status === 403) {$router.push({name: '403'});} else {// Toast.fail(response.data.message ? response.data.message : '系统错误请联系管理员');// Message.error({//     message: '无服务，请联系管理员'// });}return Promise.reject(error);}
);export default service;

http.js内容

请求数据方式

import request from './request';
// import store from './../store/index';
const http = {request(config) {request(config);},post(url, data) {// if(data instanceof Object){// }else{//     data = {//         ...data//     };// }return request({url,method: 'post',data});},postFile(url, data, contentType) {return request({url,method: 'post',data,contentType});},get(url, params) {return request({url,method: 'get',params});},put(url, data) {return request({url,method: 'put',data});},delete(url) {return request({url,method: 'delete'});},download(url, params) {return request({url,method: 'get',params,responseType: 'blob'});},downloadPost(url, data) {return request({url,method: 'post',data,responseType: 'blob'});}
};export default http;

utils.js内容

获取token，判断token是否存在

import store from '../store/index';
let util = {//获取tokengetToken() {return store.getters.token;},//判断token是否存在tokenExist() {let flag;let token = store.getters.token;if (token && token !== '') {flag = true;} else {flag = false;}return token;},
}
export default util

vuex 仓库配置

1.vuex 持久化

2.vuex 模板引用

index.js内容

import Vue from "vue"
import Vuex from "vuex"
import VuexPersistence from 'vuex-persist';
import db from './db'Vue.use(Vuex)
//vuex 状态持久化
const vuexLocal = new VuexPersistence({storage:window.localStorage
})const store = new Vuex.Store({state:{},mutations:{},actions:{},modules:{db},plugins:[vuexLocal.plugin]
})
export default store

db.js内容

const db = {state: {token: '',},getters:{token:state => state.token},mutations: {// 存储tokensetToken: (state, value) => {state.token = value}},actions: {}
}
export default db

接口封装

import http from "../common/http"/***********登录注册*************/
// 测试接口
function text(params){return http.get("api/Test/GetList", params)
}
//登录 function Login(params) {return http.post("api/Login/Login", params)
}
// 获取图形验证码
function GetValidateCode(params) {return http.post("api/Login/GetValidateCode", params)
}
// 获取手机验证码 注意：需要提前人机验证后调用 否则有被恶意刷短信的风险
function GetPhoneCode(params) {return http.post("api/Login/GetPhoneCode", params)
}
// 注册 校验信息
function RegisterUserVerify(params) {return http.post("api/Login/RegisterUserVerify", params)
}
// 注册 设置密码 注册用户信息
function RegisterUserInfo(params) {return http.post("api/Login/RegisterUserInfo", params)
}
// 忘记密码 验证姓名手机号
function ResetPasswordVerify(params) {return http.post("api/Login/ResetPasswordVerify", params)
}
// 忘记密码 密码更新
function ResetPassWord(params) {return http.post("api/Login/ResetPassWord", params)
}
export {Login,text,GetPhoneCode,RegisterUserVerify,GetValidateCode,ResetPasswordVerify,ResetPassWord,RegisterUserInfo
}

够直接明了的吧！

有用的话请点赞，关注加收藏哦(｡･ω･｡)ﾉ♡

vue 请求拦截器配置相关推荐

vue axios 拦截器配置与封装
一.安装 1. 利用npm安装npm install axios --save --save:安装在生产环境二.例子要想统一处理所有http请求和响应,就得用上 axios 的拦截器. axios ...
解决 Vue 请求拦截器无法执行
已将请求拦截器封装,然后引入到 main.js 里面.看似没有问题,但是请求拦截器无法进去. 之后检查了一下,我在请求拦截器中二次使用 axios ,并没有执行.因为在上面我又给 axios重新定 ...
vue请求拦截器响应拦截器
import axios from "axios"; // 创建一个axios的appconst request = axios.create({baseURL:'http://1 ...
【详解Vue中请求拦截器】
文章目录前言一.安装依赖二.定义拦截器 1.创建一个interceptors.js文件用于定义拦截器 2.注册插件 3.发送请总结前言提示: Vue请求拦截器通常用于在发送请求之前对请求进 ...
给axios的请求拦截器中配置token
axios 1. 配置token 用户第一次登录系统时,服务器端会返回一个身份秘钥信息(token),表明当前用户有资格.权限访问服务器,客户端获取token之后,通过sessionStorage存储 ...
Vue中的请求拦截器和响应拦截器
前置大家好,我又来了,我们今天就讲一下什么是请求拦截器,和请求拦截器的作用,好了,多余的话我就不说了,马上开始今天的讲解开始啦请求拦截器请求拦截器的作用是: 在请求发送前进行一些操作,例如在每 ...
vue 无法进入response拦截器_Vue添加请求拦截器
一.现象统一处理错误及配置请求信息二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...
axios 最全请求拦截器响应拦截器配置公共请求头超时时间以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操 ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...

vue 请求拦截器配置

vue 请求拦截器配置相关推荐

最新文章

热门文章