Axios的封装(请求拦截器和路由守卫)

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