vue实现axios和事件Bus等父子组件的事件传递实现

发送请求的配置

vue.config.js

javascript 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
  proxy:{
    '/api':{
      target:'http://localhost:7001',
      changeOrigin:true,
      pathRewrite:{
        '^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
      }
    }

  }

  }


})

javascript 复制代码

import axios from "axios";
const service = axios.create({
    timeout: 5000,
    baseURL:  'api',
    withCredentials:  true
});
// request interceptor
service.interceptors.request.use(
    config => {
     const token=   localStorage.getItem("token") 
      // do something before request is sent
      if (localStorage.getItem("token") == undefined) {
        // config.headers['Authorization'] = 'Basic ' + Base64.encode('ha_web:ha_web_secret')
      } else {
    
        // config.headers['Authorization'] = 'Basic ' + Base64.encode('ha_web:ha_web_secret')
        // config.headers['cloud-auth'] = 'bearer ' + token
        config.headers['token'] = token
      }
    //   config.headers['User-Type'] = 'pos'
      // if (store.getters.token) {
      //   // let each request carry token
      //   // ['X-Token'] is a custom headers key
      //   // please modify it according to the actual situation
      //   config.headers['X-Token'] = getToken()
      // }
      return config
    },
    error => {
      // do something with request error
  
      return Promise.reject(error)
    }
  )


  service.interceptors.response.use(
    /**
     * If you want to get http information such as headers or status
     * Please return  response => response
     */
  
    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    response => {
      const res = response.data
      // if the custom code is not 20000, it is judged as an error.
    //   if (res.code == 200 || res.code == 400) {
    //     return res
    //   } else {
    //     Message({
    //       message: res.msg || 'Error',
    //       type: 'error',
    //       duration: 5 * 1000
    //     })
  
    //     if (res.code === 401) {
    //       store.dispatch('user/resetToken').then(() => {
    //         location.reload()
    //       })
          
    //     }
    //     return Promise.reject(new Error(res.msg || 'Error'))
    //   }
      return res
    },
    error => {
    //   if (error.response.data.code == 401) {
    //     MessageBox.error('请求为授权，请重新登陆')
  
    //     store.dispatch('user/resetToken').then(() => {
    //       location.reload()
    //     })
    //   } else if (error.response.data.code == 400) {
      
    //     Message.error(error.response.data.msg)
    //   } else {
    
    //     Message.error('未知异常')
    //   }
  
   
      return Promise.reject(error)
    }
  )


export default service;

vue中bus的事件线传递接收

javascript 复制代码

        this.$eventBus.$on('show-login-dialog', () => {
            // 在这里编写弹出 el-dialog 的逻辑
            // 例.centerDialogVisible
            this.centerDialogVisible = true;
        })

路由守卫中，使用bus事件传递信息，弹出事件

javascript 复制代码

router.beforeEach((to,from,next)=>{
  //  if(localStorage.getItem('token')){
  //   next('/');


  //  }

  if(to.path ==='/login' || to.path ==='/'){
    next()
  }else{
    if(localStorage.getItem('token')){
      next()
    }else{
      // 跳转到   path: '/', name: 'home',
      next('/');
    //使用事件bus
    Vue.prototype.$eventBus.$emit('show-login-dialog')
      // next('/login')
    }
  }
})

父子组件之间的事件传递接收

javascript 复制代码

  setSearchParma() {
            this.$emit('transfer', this.searchParams.searchName) //触发transfer方法
        }

接收组件的信息

javascript 复制代码

  <AppHeader  @transfer="getSearchParam"></AppHeader>