前端开发 踩坑记录(施工中...)

最近在前端开发的过程中踩了不少坑,先记录下来,往后整理

路由实例更新

vue.js里每一次进行路由导航,对应路由的vue.js组件都会生成一个新的vue实例(简称vm),不注意这一点话会掉坑。

比如在/home路由里,在mounted()中,我在window下监听了一个键盘事件,为了避免事件重复绑定多次,我设立一个全局变量来标记创建的状态,只有第一次进入时才创建监听事件。

    if(!window.keyupFlag){
        let myFunc = ()=>{console.log(this.$refs.input1)}; //这里用箭头函数能直接在函数内拿到指向当前的vm的this
        window.addEventListener('keyup',myFunc);
        window.keyupFlag = 1;
    }

但是这样会导致一个问题,在我跳转到别的路由,比如/about后在跳转回/home,我在myFunc函数中this.$refs.input1就会返回undefined
原因就是此时/home路由中的vm不再是第一次创建监听时this指向的vm了。

那么转换思路,改成每次进入/home都创建监听事件,且在创建前先清除之前创立的事件。
以及要注意的是,清除事件的target.removeEventListener(type, listener[, options]);,其中传入的参数要和创建时的一致,且type和listener这两个参数都是必须的,具体的可以参阅MDN文档
这里我选择用vuex来保存监听的回调函数

    let myFunc = ()=>{console.log(this.$refs.input1)}; 
    
    let oldMyFunc = this.$store.state.myFunc; //第一次进入/home时这里还没有被myFunc赋值,第二次进入路由时就有正确的值了
    window.removeEventListener('keyup',oldMyFunc);
    
    window.addEventListener('keyup',myFunc);
    this.$store.commit('setMyFunc',myFunc);

使用Axios发起POST请求时,产生OPTIONS请求问题

原因是跨域发起复杂请求时,按照新的标准浏览器会先发起一个预检请求OPTIONS请求来测试请求是否能被服务器接受,如果服务端对此没有相应的处理,就会出现请求失败的问题。
具体的方案待施工,先丢几个参考

http://www.ruanyifeng.com/blo…
https://juejin.im/post/5c68b2…
https://segmentfault.com/a/11…

Oauth2.0授权请求

相关的教程很多,但是有两点鲜有提及

  1. 授权服务端要设置请求中的回调域名或ip地址
  2. 当使用code来请求access_token时,发起的请求头Header中要设置"Authorization": ...,
    具体的Authorization值可能不同的服务端会有区别,我的项目中用的是

    //BASE64编码字符串"clientId:clientSecret"
    'Basic ' + window.btoa(clientId + ':' + clientSecret);
    原文作者:OceanZH
    原文地址: https://segmentfault.com/a/1190000019578221
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注