以下为个人项目笔记：
两个文件如下：
| 文件【main.js】 |
|
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 导入elementplus 相关依赖
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const app = createApp(App) // 语言配置 中文 app.use(ElementPlus, { locale: zhCn, }) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } // ===封装好的api在api文件夹中，如果在其他地方用，还需要一个个手动导入index.js api， 有没有办法设置全局呢，答案是有的，接下来在main.js中配置，如下： // 导入封装的api对象 import api from './api/index.js' // 将api对象设置为app的全局属性 app.config.globalProperties.$api = api app.use(router).mount('#app') |
| 文件【 /api/index.js 】 |
|
/*全局配置：针对axios对后端请求进行统一封装，方便后续维护管理*/
import axios from "axios"
const http =axios.create({
// 配置baseURL
baseURL:'http://1xx.xx.4x8:18899',
// 配置响应成功时状态码
validateStatus:function(status) {
return true
}
})
// 请求拦截器,在每个请求时都会执行该方法，并把请求配置中的对象传入到该方法中
//扩展说明：在后续的非登录请求时，都需要带上鉴权
http.interceptors.request.use(function(config){
if(config.url !=='/login/'){
config.headers['Authorization']='JWT ' + window.sessionStorage.getItem('token')
}
console.log('请求拦截器:',config);
return config
});
// 响应拦截器
http.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
console.log('响应数据：',response);
// if(response.status === 301){
// // 在此处对项目中接口调用失败，做统一处理，后续一一介绍并操作
// }
return response;
})
export default{ // 登录接口 login(params){ // 以下接口地址地址会与上面的baseURL自动拼接 return http.post('/login/',params) }, // 获取项目数据 getPros(){ return http.get('/projects/',{ headers:{ 'Authorization':'JWT ' + window.sessionStorage.getItem('token') } }) } } |