美文网首页
axios.interceptors.request 支持con

axios.interceptors.request 支持con

作者: 山上有桃子 | 来源:发表于2021-04-13 15:02 被阅读0次

    在使用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对传入的参数做了过滤处理,我们需要在过滤白名单数组中增加我们需要的字段:

    新增needlogin.png

    最后重新编译(重启服务)再试一下:


    最后.png

    相关文章

      网友评论

          本文标题:axios.interceptors.request 支持con

          本文链接:https://www.haomeiwen.com/subject/setfrctx.html