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>
相关推荐
前端进阶者5 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享14 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享14 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海18 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子29 分钟前
深入理解TCP协议
前端·javascript·面试
万少30 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲44 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html