vue 请求拦截器的配置方法详解
程序员文章站
2022-06-17 16:03:15
按如下步骤进行1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置2.http.js内容:请求数据方式封装3.utils.js内容:获取to...
按如下步骤进行
1.request.js
内容:http request请求拦截器和http response服务器响应拦截器配置
2.http.js
内容:请求数据方式封装
3.utils.js
内容:获取token,判断token是否存在
4.store
文件:
vuex 仓库配置
- vuex 持久化
- 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)//隐藏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 }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
上一篇: vuex的核心概念和基本使用详解
下一篇: 从后台请求数据并解析json数据