2022-49~52周(11.21-12.18) 项目问题整理

新知识

1、好文学习

1、登录的方式及类型

一文教你搞定所有前端鉴权与后端鉴权方案，让你不再迷惘
大佬总结的还是蛮详细的，在这里归纳下，还有一些小问题自己再梳理下：

Token 时效性：uid+time+sign(token的前几位哈希算法压缩成一定长度的十六进制字符串)，uid 和 sign 生成来源的用户信息是匹配的用于后续验证，校验时效性（refresh token）可跨域、适用第三方共享 - 占带宽及加解密性能、前后端配合（Authorization ? 配置）；
如果Token被盗用呢？相比session-cookie，后者起码跨域验证session是否合理是否为对应用户，占服务资源；
refresh token 自动发起刷新新的token请求，需内置代码逻辑？
动态Token

JWT：JSON web token
header + payload + signature，存储用户信息，避免再次查询；时效性内不会更新；
复用可直接复用用户的身份，分享的方式；
？（cookie、localstorage拿不到，单传输过程中总是可以拦截的，加上http2）

单点登录 single sign on

• 同域名 cookie Domain为主域名；
• 不同域名 CAS（CAS（Central Authentication Service）中央授权服务），登录后的信息写入CAS，每次登录没有成功重定向至CAS，如果有登录后的则重定向回来并追加参数token用于像CAS服务认证；
  为什么有token再认证呢？用于验证有效性，CAS的TGC（票据凭证只是用来记录是否有登陆过避免再次输入登录信息验证，直接登录后重定向容易被窃取？怎么窃取）访问的每次请求都需要中间件拦截完成这步骤认证，CAS挂了不能继续因为不能保证安全需要兜底重定向单独登录（方案？可以接受挂掉？）
  TGC的生成规则又有什么要求呢？
  CAS一般四个接口：login、logout、validate、serviceValidate；
  TGT（Ticket Grangting Ticket） - session存储、TGC（Ticket Granting Cookie） - cookie存储、ST（Service Ticket） - 签发票据

OAuth2.0 第三方登录 - 授权短期令牌代替密码供第三方使用
参与角色：客户端、授权服务器、资源服务器，有的还有用户（资源拥有者）；
令牌短期、有权限范围、可被数据所有者撤销，立即生效；
四种模式：

• 授权码模式（Authorization Code Grant) - Web + 原生App第三方
  请求授权码 authorize - 请求令牌token - 重定向回来
• 隐藏式模式（Implicit Grant）- 不够安全 - SPA单页第三方
  请求令牌token - 重定向回来
• 用户名密码式模式（Password Credentials Grant）- 原生App非第三方 + SPA单页非第三方
  请求令牌token(用密码) - 重定向回来
• 客户端模式（Client Credentials Grant）- 客户端授权
  请求令牌token(客户端名义，可能共享) - 重定向回来

授权的多端情况分析？

联合登录和信任登录

• 联合登录
  App嵌入H5的场景：原生跳转h5时登录态token附在url上，或 ， 内嵌h5主动与原生客户端制定协议获取嘤嘤嘤内登录状态；
• 信任登录
  无用户参与，私有设备与用户绑定关系，或 第三方成熟用户库来校验凭；场景及原理？

唯一登录：禁止重复登录
二次登录时清楚服务器中的Token，生成新的Token及有效期

扫码登录：QR code (Quick Response)
h5扫码，扫码时直接内置请求凭证，将凭证种到管理端 ？？ 待更新梳理

一键登录（适用原生APP）
传统登录方式：

• 账户密码登录 配上实名制避免恶意注册、记忆成本
• 手机号验证码：验证码可能被窃取

一键登录：运营商开放服务SDK
SDK 初始化： 调用 SDK 方法，传入平台配置的 AppKey 和 AppSecret
唤起授权页： 调用 SDK 唤起授权接口，SDK 会先向运营商发起获取手机号掩码的请求，请求成功后跳到授权页。授权页会显示手机号掩码以及运营商协议给用户确认。
同意授权并登录： 用户同意相关协议，点击授权页面的登录按钮，SDK 会请求本次取号的 Token，请求成功后将 Token 返回给客户端
取号： 将获取到的 Token 发送到自己的服务器，由服务端携带 Token 调用运营商一键登录的接口，调用成功就返回手机号码。服务端用手机号进行登录或注册操作，返回操作结果给客户端，完成一键登录

2、独立审批流系统设计

公司体积越大，越需要一个合理的审批流程平台；审批更是应该作为一个单纯的服务业务而存在，整个审批的流程应该包含：Web层 - 业务服务层 - （调取审批层）- 配置服务层 - 状态服务层 - DB层；

签署流程及 或签并签 都有模板设定，可调整；

3、h5页面开发总结

h5常用来开发一些活动，活动就不可避免的逃不开大量的图片、初始化进入页面请求、https连接；

lighthouse跑分：68 -> 83，FCP 2.9s;
PS：有个懵逼的情况，lighthouse的网是不是比较慢，请求相比我这边network慢的很；

步骤：

1、资源请求：

**Avoid chaining critical requests：**删无效、压缩、提前或异步加载：
defer、async不必须js减少链式请求；async\defer：不阻塞页面渲染，inline的script不生效，不能document.write，可以处理onload事件回调；defer依旧会按顺序，所有浏览器均支持，document的DOMContentLoaded 之前执行，前者不能保证但在window的load之前执行；

preload大图片，preconnect+dns-prefetch 提前连接；
dns-prefetch 缓存原理 缩短DNS解析时间，预解析并没有反馈具体执行时间段，可能是有时间的时候处理吧
图片 preload、图片防于最大外层内部；dns-prefetch具体是在哪个阶段执行？

<link rel="preconnect" href="https://xxx.file.myqcloud.com/" crossorigin>
<link rel="dns-prefetch" href="https://xxx.file.myqcloud.com/" />
<link rel="preconnect" href="https://xxx.cdn-go.cn/" crossorigin>
<link rel="dns-prefetch" href="https://xxx.cdn-go.cn/" />
<script defer type="text/javascript" src="https://xxx.js?_bid=152"></script>
<link
  rel="preload"
  as="image"
  href="https://xxx.file.myqcloud.com/xx.png"
/>

异步加载组件vue:

import { computed, defineAsyncComponent } from 'vue'; // 异步加载组件
const SectionGotAward = defineAsyncComponent(() => import('./SectionGotAward.vue'));

2、加快请求数据资源

提前占据一个请求，加载到js的时候立即执行，避免请求链接不够的延时等待；不过此时需要注意初始进入和从别的页面进行的重新加载需另外逻辑写好，判断不能使用window.fetch是否存在来判断，因为fetch此时是一个执行完的promise
window.fetch = fetch(‘…/’);

3、设计稿的图一切以最小内容为标准，不允许大面积透明的图片存在！！css优先

4、文本设置行高，可以避免很多问题；

5、图片优先背景图片cover自适应各种屏幕，且必须有固定的宽高不能引起重排（padding-top，确定宽高比即可）；

也真的很想使用webp、avif等新格式图片，但是受众群设备类型不一，可以考虑通过添加请求头 支持按类型下发不同图片（待实践）

图片转 webp、avif ，很多可能还不支持；
前端：js在线解码高版本图片，性能通常差；server worker 拦截所有请求，可以控制返回结果，相当反向代理服务器，判断Accept请求头，代理到响应的URL；
nginx服务器 try_files 多次，如通过CDN加速配置Vary: Accept 响应头，以确保代理服务器能根据不同的 Accept 请求头缓存相应的内容；

Accept: image/webp,image/png
Accept-Encoding: gzip,deflate
Accept-Language: en-US,en;q=0.5

6、ipad兼容：做好媒体查询；层级嵌套尽量少；

position: relative;  + max-width  大屏下 保持适配大小

7、锚点vue中失效，使用原生方法 scrollIntoView

// 移到某个位置
  // (document.querySelector('#ruleDetail') as HTMLElement).scrollIntoView(true);

8、cdn加速：用户服务器之间缓存、负载均衡、动态分发技术

CDN：
从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。CDN网络是在用户和服务器之间增加Cache层，主要是通过接管DNS实现,将用户的请求引导到Cache上获得源服务器的数据。

负载均衡技术（流量，非 服务器）、动态分发与复制技术（访问响应速度：带宽、路由、访问距离、网站服务器处理能力）、缓存技术（改善用户响应时间）

9、通用样式的补充

object-fit: contain|cover|fill|scale-down|none; // CSS属性设置替换元素的内容应如何调整大小以适合其容器。 大屏图片兼容
user-select: none|contain|auto|text|all;  CSS 属性 user-select 控制用户能否选中文本；
border-style: none
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); // 滤镜，常用满屏置灰

10、背景属性应用

// background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
// 添加背景渐变，置后
background: url('https://xx.png') no-repeat  right bottom / 100% auto,  linear-gradient(180deg, rgba(255, 101, 50, 1) 0%, rgba(255, 69, 15, 1) 100%);

// background: url() no-repeat; 此时再添加cover就会报错，因为  position/bg-size 一起写， background: #00ff00 url('smiley.gif') no-repeat left top /cover;  可以这样 或 background: #00ff00 url('smiley.gif') no-repeat 0% 0% /cover; 

vue打包后在本地运行：cd dist + npx serve -d

问题

1、a标签download属性下载跨域资源失败

或许可以换个窗口打开，让用户保存，让浏览器完成请求；

2、开启https - nginx配置

server {
listen 443 ssl http2 default_server;
server_name www.mf8.biz;

ssl_certificate /path/to/public.crt;
ssl_certificate_key /path/to/private.key;