Axios 全局配置以及封装使用

Axios 官网
了解和为了以后项目的方便，到时候可以直接复制粘贴使用，不需要自己再重写一次axios，自己写了一个通用的拦截器 request.js 和 路由守卫 permission.js，下次有新项目就可以直接使用了，不需要自己再重写。

全局配置：

import axios from ‘axios’

请求拦截器： request.js

const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // urltimeout: 5000  // 响应时间
})// 存储获取到的token
service.interceptors.resquest.use((config) =>{config.headers.Authorization = localStorage.getItem('token')return config}
)service.interceptors.response.use((response) => {// 结构 data 和 metaconst { data , meta } = response.data // successif (meta.status === 200 || meta.status === 201){return data		} else {return Promise.reject(new Error(meta.msg))}},(error) =>{ // errorerror.responsereturn 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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！