欢迎光临散文网 会员登陆 & 注册

前端面试记录

2023-03-24 23:53 作者:当阳战神刘阿斗  | 我要投稿

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 可点击,不可见,只需重绘

10typescript type和interface的区别

11 如何不使用proxy实现双向绑定(不会)


前端面试记录的评论 (共 条)

分享到微博请遵守国家法律