# 什么是认证（Authentication）

• 通俗地讲就是验证当前用户的身份，证明 “你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）
• 互联网中的认证：
• 用户名密码登录
• 邮箱发送登录链接
• 手机号接收验证码
• 只要你能收到邮箱 / 验证码，就默认你是账号的主人

# 什么是授权（Authorization）

• 用户授予第三方应用访问该用户某些资源的权限
• 你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）
• 你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）
• 实现授权的方式有： cookie 、 session 、 token 、 OAuth

# 什么是凭证（Credentials）

• 实现认证和授权的前提是需要一种媒介（证书） 来标记访问者的身份
• 在战国时期，商鞅变法，发明了照身帖。照身帖由官府发放，是一块打磨光滑细密的竹板，上面刻有持有人的头像和籍贯信息。国人必须持有，如若没有就被认为是黑户，或者间谍之类的。
• 在现实生活中，每个人都会有一张专属的居民身份证，是用于证明持有人身份的一种法定证件。通过身份证，我们可以办理手机卡 / 银行卡 / 个人贷款 / 交通出行等等，这就是认证的凭证。
• 在互联网应用中，一般网站（如掘金）会有两种模式，游客模式和登录模式。游客模式下，可以正常浏览网站上面的文章，一旦想要点赞 / 收藏 / 分享文章，就需要登录或者注册账号。当用户登录成功后，服务器会给该用户使用的浏览器颁发一个令牌（token），这个令牌用来表明你的身份，每次浏览器发送请求时会带上这个令牌，就可以使用游客模式下无法使用的功能。

前言

Vue3 已经推出很长时间了，它周边的生态也是越来越完善了。之前我们使用 Vue2 的时候，Vuex 可以说是必备的，它作为一个状态管理工具，给我们带来了极大的方便。Vue3 推出后，虽然相对于 Vue2 很多东西都变了，但是核心的东西还是没有变的，比如说状态管理、路由等等。再 Vue3 种，尤大神推荐我们使用 pinia 来实现状态管理，他也说 pinia 就是 Vuex 的新版本。

那么 pinia 究竟是何方神圣，本篇文章带大家一起学透它！

TCP 三次握手和四次挥手的问题在面试中是最为常见的考点之一。很多读者都知道三次和四次，但是如果问深入一点，他们往往都无法作出准确回答。本篇尝试使用动画来对这个知识点进行讲解，期望读者们可以更加简单地地理解 TCP 交互的本质。

同域下多窗口间 localStorage 能共享吗？

• 答案是可以，如果页面中出现了串数据的话，很大概率就是 localStorage 共享导致的。

那么， sessionStorage 在多窗口之间能共享状态吗？

# 一、查阅文档

根据 MDN 的说法： sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

1. 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
2. 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文， 这点和 session cookies 的运行方式不同。
3. 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage 。
4. 关闭对应浏览器标签或窗口，会清除对应的 sessionStorage 。

最近在写元素周期表时，发现 svg 很多属性不是记得十分清楚，导致角度出问题，现在特来总结回顾一下

# 一、path 路径是什么？

path 路径是 svg 中最强大的图形

路径是由一系列命令所组成。 包括以下基本指令：

PS：如果指令字母是大写的，例如 M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如 m, 则表示坐标位置是相对位置。

path 是 SVG 基本形状中最强大的一个，不仅可以实现 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状，还可以实现更复杂的效果，我们就开始学习 path 如何应用。

path 元素的能力

path 元素是 SVG 基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。

比如矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形等。

更重要的是能够绘制一些曲线，如贝塞尔曲线、二次曲线等。

path 元素的形状是通过属性 d 来定义的，d 属性通过 “命令和坐标” 的序列来控制整个 path 绘制的路径

# 虚拟 DOM

虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容.

为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。

• 原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的
• DOM 对象 和 HTML 元素之间是一一对应的关系

# 一、animation 属性也是一个简写属性，用于设置六个动画属性。

用法：animation: name duration timing-function delay iteration-count direction;

这六个属性值分别为：

# 面试题 1

Vue 打包后，assets 和 static 的区别是什么？

道为专家解析：

相同点：assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点。

不相同点：assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。

因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议：将项目中 template 需要的样式文件 js 文件等都可以放置在 assets 中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如 iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

# 1、什么是微前端

微前端是一种架构风格，旨在通过将前端应用程序拆分为更小、更可管理的部分，使团队能够独立开发、部署和维护这些部分。微前端的目标是将前端应用程序拆分成多个更小的、独立的部分，这些部分可以由不同的团队开发和部署，同时还可以组合成一个完整的前端应用程序。