在使用axios
的请求拦截器axios.interceptors.request
对请求数据做处理时,有一个需求就是通过自定义参数needLogin
判断该请求是否需要验证登录信息。需要的话,在请求之前,前端就进行一次校验,避免前端存储的登录token已失效情况下任然发送请求增加后台负担。
通过【请求拦截器 】axios.interceptors.request.user((config)=>{})
进行拦截判断是否 needLogin
在main.js
设置拦截器
//main.js
import Vue from 'vue';
import router from './router';
import store from './store';
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios, axios);
axios.defaults.timeout = 5000;// 请求超时
axios.defaults.baseURL = process.env.VUE_APP_URL;
// axios.defaults.headers.post['Content-Type'] = 'application/json';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//1、判断是否需要登录
console.log(`请求【${config.url}】${config.needLogin?'需要':'不需要'}登录`);
if(config.needLogin){
if(store.state.token){
console.log(`【store.state.token】存在 = ${store.state.token}`);
}else{
console.warn(`【store.state.token】不存在`);
//需要从 localStorage 中重新获取token,获取失败则跳转登录页
}
}
//2、将token添加入头部
if (store.state.token) {
//如果vuex中存储有用户token,就把token传给后端
config.headers.token = `${store.state.token}`;
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
let app = new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
然后我们调用axios.request()
验证一下
//list.vue
<script>
export default {
name: 'list',
data(){
return {
list:[],//列表
}
},
created(){
console.log('created');
this.getList();
},
methods:{
getList(){
this.axios.request({
needLogin:true,//这里设置了needLogin
method:"get",
url:"/test-json/order_list.json",
}).then((response)=>{
// console.log('response',response,arguments);
}).catch((error)=>{
console.log('error',error,arguments);
})
}
},
};
</script>
然后,我们会发现
找不到.png
为什么config中找不到needLogin
?
因为axios
对传入的参数做了过滤
处理,我们需要在过滤白名单数组
中增加我们需要的字段:
最后重新编译(重启服务)再试一下:
最后.png
网友评论