【前端面试题】2021/3/15面试题
最近在boss直聘上投了很多简历，记录一下今天的面试题，这个好几个都是电话直接打过来问时间方便？我一回答方便就直接开始丢题目，我也不知道哪个公司的。感觉公司不是很正规的感觉，感觉那边有个问题题库，面试官不够灵活，读课本一样，不说了，看题！
目录
1.原型链？
2.token、session、cookie的区别？
3.拦截器的作用？
4.简述MVVM模型？
1.原型链？
所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。
引用javascript——原型与原型链
2.token、session、cookie的区别？
Cookie
cookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。
cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该cookie发送给服务器。由于cookie是存在客户端上的，所以浏览器加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间，所以每个域的cookie数量是有限的。
Session
session 从字面上讲，就是会话。这个就类似于你和一个人交谈，你怎么知道当前和你交谈的是张三而不是李四呢？对方肯定有某种特征（长相等）表明他就是张三。
session 也是类似的道理，服务器要知道当前发请求给自己的是谁。为了做这种区分，服务器就要给每个客户端分配不同的“身份标识”，然后客户端每次向服务器发请求的时候，都带上这个“身份标识”，服务器就知道这个请求来自于谁了。至于客户端怎么保存这个“身份标识”，可以有很多种方式，对于浏览器客户端，大家都默认采用 cookie 的方式。
服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全，可是session有一个缺陷：如果web服务器做了负载均衡，那么下一个操作请求到了另一台服务器的时候session会丢失。
Token
Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。最简单的token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名，由token的前几位+盐以哈希算法压缩成一定长的十六进制字符串，可以防止恶意第三方拼接token请求服务器)。
使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
基于 Token 的身份验证
使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：
- 客户端使用用户名跟密码请求登录
- 服务端收到请求，去验证用户名与密码
- 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
- 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
- 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
- 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
APP登录的时候发送加密的用户名和密码到服务器，服务器验证用户名和密码，如果成功，以某种方式比如随机生成32位的字符串作为token，存储到服务器中，并返回token到APP，以后APP请求时，凡是需要验证的地方都要带上该token，然后服务器端验证token，成功返回所需要的结果，失败返回错误信息，让他重新登录。其中服务器上token设置一个有效期，每次APP请求的时候都验证token和有效期。
那么我的问题来了： 1.服务器上的token存储到数据库中，每次查询会不会很费时。如果不存储到数据库，应该存储到哪里呢。 2.客户端得到的token肯定要加密存储的，发送token的时候再解密。存储到数据库还是配置文件呢？
token是个易失数据，丢了无非让用户重新登录一下，新浪微博动不动就让我重新登录，反正这事儿我是无所谓啦。
所以如果你觉得普通的数据库表撑不住了，可以放到 MSSQL/MySQL 的内存表里（不过据说mysql的内存表性能提升有限），可以放到 Memcache里（讲真，这个是挺常见的策略），可以放到redis里（我做过这样的实现），甚至可以放到 OpenResty 的变量字典里（只要你有信心不爆内存）。
token是个凭条，不过它比门票温柔多了，门票丢了重新花钱买，token丢了重新操作下认证一个就可以了，因此token丢失的代价是可以忍受的——前提是你别丢太频繁，要是让用户隔三差五就认证一次那就损失用户体验了。
基于这个出发点，如果你认为用数据库来保持token查询时间太长，会成为你系统的瓶颈或者隐患，可以放在内存当中。
比如memcached、redis，KV方式很适合你对token查询的需求。
这个不会太占内存，比如你的token是32位字符串，要是你的用户量在百万级或者千万级，那才多少内存。
要是数据量真的大到单机内存扛不住，或者觉得一宕机全丢风险大，只要这个token生成是足够均匀的，高低位切一下分到不同机器上就行，内存绝对不会是问题。
客户端方面这个除非你有一个非常安全的办法，比如操作系统提供的隐私数据存储，那token肯定会存在泄露的问题。比如我拿到你的手机，把你的token拷出来，在过期之前就都可以以你的身份在别的地方登录。
解决这个问题的一个简单办法
1、在存储的时候把token进行对称加密存储，用时解开。
2、将请求URL、时间戳、token三者进行合并加盐签名，服务端校验有效性。
这两种办法的出发点都是：窃取你存储的数据较为容易，而反汇编你的程序hack你的加密解密和签名算法是比较难的。然而其实说难也不难，所以终究是防君子不防小人的做法。话说加密存储一个你要是被人扒开客户端看也不会被喷明文存储……
方法1它拿到存储的密文解不开、方法2它不知道你的签名算法和盐，两者可以结合食用。
但是如果token被人拷走，他自然也能植入到自己的手机里面，那到时候他的手机也可以以你的身份来用着，这你就瞎了。
于是可以提供一个让用户可以主动expire一个过去的token类似的机制，在被盗的时候能远程止损。
在网络层面上token明文传输的话会非常的危险，所以建议一定要使用HTTPS，并且把token放在post body里。
补充：
cookie与session的区别
1、cookie数据存放在客户端上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
3.拦截器的作用？
二：Axios封装的http拦截器：
在请求或响应被 then 或 catch 处理前拦截它们，分为请求拦截器（发送请求前触发）和响应拦截器（得到响应结果后触发）。（在请求接口调用时触发）
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
注意：一定要有返回值
4.简述MVVM模型？
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
Model
我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为（格式化数据由View的负责），这里可以把它理解为一个类似json的数据对象。
var data = {val: 0
};View
指的是所看到的页面，和MVC/MVP不同的是，MVVM中的View通过使用模板语法来声明式的将数据渲染进DOM，当ViewModel对Model进行更新的时候，会通过数据绑定更新到View。
div id="myapp"><div><span>{{ val }}rmb</span></div><div><button v-on:click="sub(1)">-</button><button v-on:click="add(1)">+</button></div>
</div>ViewModel
mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：
- 将Model转化成View，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
- 将View转化成Model，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
new vue({el: '#myapp',data: data,methods: {add(v) {if(this.val < 100) {this.val += v;}},sub(v) {if(this.val > 0) {this.val -= v;}}}
});总结：
在MVVM的框架下视图View和模型Model是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
整体来看，简化了业务与界面的依赖，还解决了数据频繁更新（以前用jQuery操作DOM很繁琐）的问题。因为在MVVM中，View不知道Model的存在，ViewModel和Model也察觉不到View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性。
MVVM流程图如下：
好啦，本期的内容就分享到这里，我们下期见！
好书不厌百回读，熟读自知其中意。让学习成为习惯，用知识改变命运，让博客见证成长，用行动证明努力。
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！
听说【前端面试题】2021/3/15面试题相关推荐
- 前端面试题——2021最新企业面试题
2021最新企业面试题 对MVVM的理解 浏览器的渲染机制 事件循环机制(Event Loop) 宏任务和微任务(先执行微观任务,再执行宏观任务) 你对Promise的理解 数组的常用方法 虚拟DOM ...
- 科大讯飞 笔试题2021.8.15 Java版
1.将数的二进制表示中倒数第二个0改为1 2.求出字符串中包含26个字母的子串的最小长度,其中"?"可以代替其中一个字母 3.计算二叉树中距离为k的节点对的数量 1.将数的二进制表 ...
- 农行2021计算机专业面试题,2021农业银行总行笔试试题答案（考生回忆）-行测
原标题:2021农业银行总行笔试试题答案(考生回忆)-行测 2021农业银行总行笔试与9月13日进行,中公金融人为大家提供了农业银行总行笔试行测试题的答案,方便大家提前了解笔试成绩,做好后期的笔试备考 ...
- 网易有道秋招前端面经
网易有道秋招前端面经 2021/01/13 一面 时长:50分钟 vue双向绑定原理 为什么需要虚拟DOM,diff算法的作用 render树和DOM树的区别 组件间的通信 排序有哪些,手写快排 设计 ...
- 前端面试题2021(超详细)
真的是一篇好文章,好文就要收藏~ 晟小明 身为三本的我就是凭借这些前端面试题拿到百度京东offer的,前端面试题2021及答案
- 2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
- 身为三本的我就是凭借这些前端面试题拿到百度京东offer的，前端面试题2021及答案
更新啦!更新啦! 2022年面试题及答案 点进来之后你的噩梦就要来了,接下来你要面对上百道面试题,那么,如果你-- 是个小白菜: 推荐使用2~3周的时间来消化接下来的面试题, 遇到不会的没听说过名词请 ...
- 2021前端面试题系列：fetch与axios、浏览器内多个标签页面通信及安全问题
大家好,我是前端岚枫,今天主要跟大家分享我整理的笔记2021前端面试题系列:fetch与axios.浏览器内标签页之间的通讯方法.XSS 和CSRF以及如何防范,此方面内容在我们的工作中常用到, 也是 ...
- 2021前端面试题系列：HTTP请求和HTTP缓存控制
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的笔记2021前端面试题系列:HTTP请求和HTTP缓存控制,此方面内容在我们的工作中常用到, 也是面试官经常提问的问题,希望下面文 ...
最新文章
- python制作词云时出现figure1 figure2_用Python生成词云
- 基于angularJS和requireJS的前端架构
- js更改html元素颜色,HTML - 使用JS根据值更改文本的颜色
- 【DIY】送给儿子的礼物——DIY故事机（音乐播放器）
- CSS3动画---移动端上下固定高度，中间自适应
- 信息类产品检测培训讲义-EN55024
- C#算法设计排序篇之06-堆排序（附带动画演示程序）
- Android 移动开发知识体系
- 操作系统--存储管理的任务
- mos管结电容等效模型_【详解各元器件等效电路】电阻、电容、电感、二极管、MOS管！...
- html播放flv直播源码,使用flv.js实现HTML5播放FLV视频文件
- dB dBm dBW 的关系与换算
- vSphere ESXI 7.0部署详细安装指南
- Spring ldap ODM
- 国产UOS系统之——安装N卡驱动（多屏显示）
- 检查一个字符串是否为回文 回文:正着念与反着念一样，例如:上海自来水来自海上；要求用户从控制台输入一个email地址，然后获取该email的用户名(@之前的内容)
- linux lxde桌面快捷键,LXde 桌面有两下啊
- Kubernetes多节点二进制部署
- Linux执行命令常见的英语语句
- jstack排查死锁问题
热门文章