Axios的封装(请求拦截器和路由守卫)
2023-09-11 14:19:18 时间
Axios 全局配置以及封装使用
Axios 官网
了解和为了以后项目的方便,到时候可以直接复制粘贴使用,不需要自己再重写一次axios,自己写了一个通用的拦截器 request.js
和 路由守卫 permission.js
,下次有新项目就可以直接使用了,不需要自己再重写。
全局配置:
import axios from ‘axios’
请求拦截器: request.js
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url
timeout: 5000 // 响应时间
})
// 存储获取到的token
service.interceptors.resquest.use(
(config) =>{
config.headers.Authorization = localStorage.getItem('token')
return config
}
)
service.interceptors.response.use(
(response) => {
// 结构 data 和 meta
const { data , meta } = response.data
// success
if (meta.status === 200 || meta.status === 201){
return data
} else {
return Promise.reject(new Error(meta.msg))
}
},(error) =>{ // error
error.response
return Promise.reject(new Error(error.response.data))
}
)
// 导出
export default service
路由守卫 permission.js
import router from ‘./index’
import store from ‘@/sotre’ // 获取token,因为状态存储到了vuex中
// 定义一个白名单
const whiteList = ['/login']
router.beforeEach((to,from,next) =>{
if(store.getters.token) {
if(to.path === '/login') {
next('/') // 去首页
} else {
next()
}
} else {
if(whiteList.includes(to.path)) { // 到我们页面去的路径
next()
} else {
next('/login')
}
}
})
注:
什么是白名单呢? 通俗的说:“就是用户在没有登陆的情况下也可以进行访问的页面就是所谓的白名单。”
获取token getters.js
注:
state.app.token 中的app是定义的一个js文件名
export default {
token: state => state.app.token
}
记得要去main.js中去导入这个permission.js
相关文章
- 抽象和封装
- 系统封装 EasyBoot如何将WIN7安装版提取到光盘
- iOS AFN的再次封装
- 第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据
- EasyDarwin开源音频解码项目EasyAudioDecoder:EasyPlayer Android音频解码库(第二部分,封装解码器接口)
- 视频监控 封装[PlayCtrl.dll]的API
- CSV和集合对象基于Annotation操作封装
- Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js
- Python语言学习:Python语言学习之面向对象编程OO(继承&封装&多态)/类&方法/装饰器的简介、案例应用之详细攻略
- FFmpeg文件转封装
- 音视频封装格式:MPTG2-TS
- 音视频开发(五):MediaExtractor MediaMuxer 实现视频的解封装与合成
- Android ToolBar 的简单封装
- Java 封装