前端面试记录
1在登录过程中怎么使用cookie处理token的
cookie的读取:document.cookie
设置cookie:document.cookie=name=${encodeURIComponent(name)}; max-age=1000;
服务器端设置cookie
var http = require('http');var fs = require('fs');
http.createServer(function(req, res) {
res.setHeader('status', '200 OK');
res.setHeader('Set-Cookie', 'isVisit=true;domain=.yourdomain.com;path=/;max-age=1000');
res.write('Hello World');
res.end();
}).listen(8888);
console.log('running localhost:8888')
session 是另一种记录服务端与客户端会话状态的机制 session 基于cookie实现的,session储存在服务端,sessionId储存在客户端的cookie中
session的认证流程(sessionId是连接cookie和session的桥梁,以此实现登录验证)
1 用户第一次请求服务器的时候,服务器会根据请求信息生成session
2 请求返回session唯一的标识sessionId给浏览器
3 浏览器接收到服务器发回的请求,会将sessionId存入到cookie中,并记录其对应的域名
4 用户第二次访问服务端的时候,浏览器会将此域名下的cookie发给服务端,服务端获取seeeionId查找对应的session信息,看是否登录。
session和cookie的区别
1 session是在服务端,cookie是在客户端,session更安全
2 session可储存任意类型的数据,cookie只能存储字符串
3 cookie可设置长时间保存,session在过期或浏览器关闭后失效
4 cookie只有4kb,session容量高,但会对服务器造成压力
token和session的区别
1 session是记录服务端和客户端会话状态的机制,使得服务端有状态化,可记录会话信息。token是令牌,是访问资源的凭证,使得服务端无状态化
2 token更安全,每个请求都带签名
JWT 认证流程:
用户输入用户名/密码登录,服务端认证成功后,会返回给客户端一个 JWT 客户端将 token 保存到本地(通常使用 localstorage,也可以使用 cookie) 当用户希望访问一个受保护的路由或者资源的时候,需要请求头的 Authorization 字段中使用Bearer 模式添加 JWT,其内容看起来是下面这样
2行内元素和块级元素
行内元素
无法设置宽高 margin左右有效,上下无效 padding不会自动换行
块级元素
可设置宽高 超出当前行会自动换行 多个块级默认会从上往下
通过block,inline,inline-block转化
3animation和transform
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state
transition-property: 过渡属性,默认值:all; transition-duration: 过渡持续时间,默认值:0s; transiton-timing-function: 过渡函数,默认值:ease; transition-delay: 过渡延迟时间,默认值:0s;
transform:rotate translate scale skew
4父子组件生命周期的执行顺序
父beforecreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
5Promise.all和Promise.race
Promise.all()检测参数内部所有的Promise实例是否成功,如果成功,就调用.then()变为reject状态
promise.race() 那个先改变状态,其状态也跟着改变,获取那个率先改变的Promise实例的返回值作为回调函数的参数
Promise.allSettled() 异步操作全部结束后调用
Promise.any() 只要其中的一个 promise 成功,就返回那个已经成功的 promise ,如果可迭代对象中没有一个 promise 成功(即所有的 promises 都失败/拒绝),就返回一个失败的 promise 和 AggregateError 类型的实例,它是 Error 的一个子类,用于把单一的错误集合在一起
6输入框快速输入的防抖结论
7es6新增
8px em rem vw vh %
vw vh是相对于视口单位
9display:none visibility: hidden与opacity: 0的区别
display:none:不占高度,不可点击,不在渲染树中,子节点也不可修改 visibility:hidden 只是将元素隐藏,还是在渲染树中,占据空间,子元素可以通过visibility:visible显示,只需重绘 opacity:0 可点击,不可见,只需重绘