这篇文章给大家介绍vue请求拦截器的配置方法是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
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)//隐藏loading if (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 = { //获取token getToken() { 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 仓库配置
vuex 持久化
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: { // 存储token setToken: (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请求拦截器的配置方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。