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

最近在前端开发的过程中踩了不少坑，但是又没什么时间整理，先临时记录下来，往后再整理

路由实例更新

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请求来测试请求是否能被服务器接受，如果服务端对此没有相应的处理，就会出现请求失败的问题。

具体的方案待施工，先丢几个参考

Oauth2.0授权请求

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

1. 授权服务端要设置允许发起请求的域名或ip地址

2. 当使用 code 来请求 access_token 时，发起的请求头Header中要设置 "Authorization": ...,
   具体的Authorization值可能不同的服务端会有区别，我的项目中用的是

   //BASE64编码字符串"clientId:clientSecret"
   'Basic ' + window.btoa(clientId + ':' + clientSecret);