vue请求拦截器的配置方法是什么
发表于:2024-10-16 作者:千家信息网编辑
千家信息网最后更新 2024年10月16日,这篇文章给大家介绍vue请求拦截器的配置方法是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。request.js内容http request请求拦截器和http respon
千家信息网最后更新 2024年10月16日vue请求拦截器的配置方法是什么
这篇文章给大家介绍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错误,并重新跳入登页重新获取tokenservice.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请求拦截器的配置方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
拦截器
内容
登录
配置
密码
验证
错误
服务
方法
成功
信息
手机
接口
更多
服务器
管理员
帮助
管理
联系
不错
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
入侵远程服务器
澳 软件开发
两个gdc服务器怎么节目互传
杭州新麟网络技术有限公司
中区团委开展网络安全宣传讲座
网络安全培训讲座视频
服务器与网页传输的协议
健身俱乐部网络安全管理办法
2022怀旧服有新开的服务器吗
软件开发工程师等级划分
软件开发的基本步骤
网络技术后端是什么
大学生网络安全主题板报
分手日记软件开发
梦幻服务器等级升到80要多久
全唐诗作者综合数据库
惠普服务器管理口重装系统教程
ipc嵌入式软件开发
深圳享联网络技术有限公司
邯郸盘古网络技术有限公司招聘
淘宝直播服务器返回异常
数据库热更新是什么意思
沈阳网络安全就业班
什么是许可管理器服务器
紫光芯云数据库
如何查人民日报图文数据库
网络安全非常重要的原因
网络安全资讯免费学
福建省网络安全监测中心
云会展网络安全吗