FrankKai

I can config devServer successfully by this way. ```js const { webpackConfig } = require("direflow-scripts"); module.exports = { webpack: (config, env) => { return { ...webpackConfig(config, env), }; }, devServer:...

### cookie基础概念 #### 读cookie ```js allCookies = document.cookie; ``` #### 写cookie ``` ;path=path ;domain=domain ``` path:1.若Path为 / ，那么无论是路径/foo还是子路径/foo/bar，从浏览器发到服务端的请求，在header中都会带上cookie头 2.必须是绝对路径 3.若不指定path，则为当前location的pathname domain:1.指出可以接收cookie的host。默认是location.host 2.若设置了Domain属性，那么它的子域名中也是包含这个cookie的 这两个属性定义了cookie的**作用域**，也就是说这个cookie是要发给谁的。 衍生面试题：聊一聊cookie的作用域？ ``` ;max-age=max-age-in-seconds ;expires=date-in-GMTString-format ``` 这两个属性定义了cookie的过期时间。 expires和max-age都是设置过期时间的，[规范定义规则](https://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html)如下：...

### cookie使用实践 1. 前端cookie如何设置过期时间？ ```js const d = new Date(); d.setTime(d.getTime() + 30*60*1000); // 设置过期时间为30分钟 const cookieKV = 'cookieKey=cookieValue'; const expires = `expires=${d.toGMTString()}`;// 由于cookie的过期时间类型为 ;expires=date-in-GMTString-format，所以需要用Date.toGMTString()转换成GMT类型 document.cookie = `${cookieKV};${expires}`; // 30分钟后此cookie失效，从cookie列表中删除...

### 浏览器如何精确清除cookie 1.网站设置→Cookie→查看所有Cookie和网站数据 找到需要删除的网站并删除Cookie即可。 2.点击浏览器url左边的**不安全**或**锁子**  

### 常见应用场景 #### cookie是当前tab有效的还是所以tab有效的？ **cookie是通过domain指定作用范围的。** 若是服务端，可以指定domain，若是跨系统cookie，一般是一级域名；若指定系统，可以指定二级，三级域名。 若是前端，一般是设置在document.cookie上，在当前域名设置。  #### 服务端如何既对token做处理又对cookie做处理？ `const certificate = token || cookie` 优先使用token。 #### cookie与前端安全 敏感数据的cookie（httpOnly为true）通过服务端写入。 为了避免XSS和CSRF攻击，包含敏感数据的cookie通过服务端写入，此时httpOnly属性为true，浏览器通过document.cookie 这个api获取不到，是一种安全防范措施。

### mapState与mapGetter的区别是什么？ 我们都知道，这是我们从vuex查询数据的两种方式，那这两者到底有什么区别呢？ 直接看二者的定义： ```js // https://vuex.vuejs.org/api/#mapstate mapState(namespace?: string, map: Array | Object): Object ``` ```js // https://vuex.vuejs.org/api/#mapgetters mapGetters(namespace?: string, map: Array | Object): Object ``` 如果看定义看不懂的话，可以移步[TypeScript入门](https://github.com/FrankKai/FrankKai.github.io/issues/105)，或者到TypeScript官网自己学习，了解TypeScript中的Optional Property和strictNullChecks。 二者的第一个参数都是可选的命名空间，第二个是数组或者对象的map。 -...

### Vuex的plugins有什么用？ 暴露每个mutation的hooks，只接收一个store（初始化好的store）为参数。 - Plugin内部提交mutation - 获取状态快照 - Built-in Logger插件 最简单的开发和注入： ```js const myPlugin = store => { store.subscribe((mutation, state) => { }) } ``` ```js const store = new...

### this.$store.commit()和mapMutation()哪种更好？ 当然是mapMutation，可以**统一查看当前组件有多少mutation类型**，但是需要注意命名不能和组件方法冲突。 ```js import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment', // 不带payload映射，map `this.increment()` to `this.$store.commit('increment')` 'incrementBy' // 带payload映射，map `this.incrementBy(amount)` to `this.$store.commit('incrementBy',...

### mutation与action区别是什么？ - mutation必须同步进行，action可以异步进行。 - action可以调用异步api，可以分发多重mutation。 - action可以返回promise，保证异步请求的顺序，一个action执行完再触发第二个action。 2019.10.4更新 - action是为了异步请求后在action内部调用其他mutation。 #### mutation可以结构多个入参数吗？ 当然，加个判断就好了。

### Modules的namespacing是什么操作？ - 默认情况下，actions，mutations和getters是注册在**global namespace**的，这样设计的目的是**多个module可以对同一mutation或者action**做出响应。（据我使用两年vuex的经验，基本不会有这种操作，都是各模块管各模块的。） - namespaced: true可以使得模块更加自容器化和可重用，开启namespaced后，所有的getters，actions，mutations都会自动添加路径。 - namespaced开启后，可以使用本地化的getters, dispatch和commit，单个module中的资源不需要增加前缀就可以访问。 ```js modules: { account: { namespaced: true, // module assets state: { ... }, // module state is already...