🍀 FourLeaf
Switch language
zh
Switch theme
Light

  • access_token 和 refresh_token 的使用

    在 Web 开发中，使用 access_token 和 refresh_token 的双 token 机制是为了在安全性与用户体验之间取得平衡。以下是它们各自的作用以及为什么需要使用双 token： access_token 的作用 访问受保护资源：access_token 是用于直接访问受保护资源的令牌。它通常包含用户的身份信息和权限范围。 短生命周期：access_token 的有效期较短，通常为几分钟到几小时。这样做的目的是减少令牌被泄露后可能造成的损害，因为攻击者只有很短的时间窗口可以利用这个令牌。 refresh_token 的作用 刷新 access_token：当 access_token 过期时，refresh_token 用于获取新的 access_token。它不需要用户重新登录，从而提高了用户体验。 长生命周期：refresh_token 的有效期较长，通常为几天到几周。它通常存储在客户端的安全存储中，如加密的本地存储。 安全存储：由于 refresh_token 的有效期较长，它通常不会频繁地在网络中传输，从而降低了被盗的风险。 为什么要使用双 token 提高安全性：通过将 access_token 和 refresh_token 分开使用，即使 access_token 被泄露，攻击者也无法长时间利用它。而 refresh_token 由于其长生命周期和安全存储，即使被盗，服务器也可以随时将其标记为无效。 优化用户体验：用户不需要频繁重新登录。当 access_token 过期时，系统可以自动使用 refresh_token 获取新的 access_token，用户几乎感觉不到任何中断。 简化 Token 管理：双 token 机制使得 Token 的管理更加灵活，可以根据不同的安全需求设置不同的有效期。 实际 axios 使用时, 使用 axios 的 interceptor 拦截 access_token 失效的请求, 通过 refresh_token 无感刷新 access_token 后, 再重放 之前失败的请求 import axios from 'axios' const instance = axios.

  • Prisma Migrate after Deployment

    Prisma Migrate after Deployment 背景: 线上环境部署后，数据库表结构有变更，但未同步到线上数据库中，导致线上环境也需要更新 数据库 & prismaClient。 操作步骤 开发环境 修改 scheme.prisma, 如给 user 添加 age 字段 开发环境 执行 npx prisma migrate dev --name add-age-to-user, 这里要 –name 指定生成的迁移文件(夹)名称, 这里也会同时生成新的 /nodemodules/.prisma/client/* 文件, 不需要再次 npx prisma generate 更新 prismaClient 开发环境 执行 npx prisma migrate deploy 变更数据库表结构 生产环境 pull 到最新的 scheme.prisma 及 migration 文件 生产环境 执行 npx prisma generate 生成新的 /nodemodules/.prisma/client/* 文件 生产环境 执行 npx prisma migrate deploy 同步最新的数据库表结构 (不改变原有数据)

  • Line Breaks for Strings on Canvas

    canvas 绘制文本时, 换行如何解决 背景 微信小程序中使用 canvas 绘制分享海报长文本不能自动换行 题外: Taro 小程序中 canvas 的宽高设置 // poster.jsx export default () => { useLoad(() => { ... const dpr = Taro.getWindowInfo().pixelRatio // canvas对象 通过 createSelectorQuery 获取 canvas.width = renderWidth * dpr canvas.height = renderHeight * dpr ctx.scale(dpr, dpr) ... }) return ( ... <Canvas id='poster' type='2d' style='width:320px;height:400px' /> ... ) } 思路 对于纯中文, 不用考虑单词被分到两行 先将文本按每个 字符 分成数组 按 canvas 的 measureText 方法调整一行的宽度(字体大小不同, 宽度不同), 获取每一行应该出现的文本 分行按高度输出 对于纯英文, 要考虑单词被分到两行

  • Line Clamp 展开问题

    要求: 多行文本时, 显示可展开按钮, 如果小于指定行数则无需显示 通过 line-clamp 设置行数 通过里外 div 的高度来初始化是否需要 “展开” 按钮 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .contentBox { margin: 20px 0; border: 1px solid #666; width: 200px; } input { display: none; } .outer { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } input[name="toggle"]:checked + .outer { -webkit-line-clamp: unset; } input[name="toggle"]:checked + div.outer + label::after { content: '收起'; } label::after { content: '更多'; } label { display: none; background: #aaa; padding: 1px 2px; } </style> </head> <body> <button onclick="setLine('<3')">文本长度 < 3 行</button> <button onclick="setLine('=3')">文本长度 = 3 行</button> <button onclick="setLine('>3')">文本长度 > 3行</button> <div class="contentBox"> <input type="checkbox" id="toggle" name="toggle"> <div class="outer"> <div class="inner"> -webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数。 <br> 它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 box-orient 属性设置成 vertical时才有效果。 <br> 在大部分情况下，也需要设置 overflow 属性为 hidden，否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号。 </div> </div> <label for="toggle"></label> </div> <script> function displayLabel() { if (document.

  • Jquery Fill Vue Input

    想要使用 Jquery 写油猴脚本自动填充网页中的 input 框时, 使用 jquery 操作如下 <form> <input type="text" name="username"> <input type="password" name="password"> </form> $('input:eq(0)').val('myname') // eq 用于特定第几个 input $('input:eq(1)').val('mypassword') 但如果目标网页是由 Vue(React) 编写的, 那么此种方法并不能改变框架内的 v-model 的值, 原因是 Vue 监听的是 input 元素的 input 事件, 而直接使用 jquery(vanilla js) 修改 input 元素的值并不会触发 input 事件, 解决办法是修改值后, 手动触发 input 事件 $('input:eq(0)')[0].dispatchEvent(new Event('input'), {bubbles: true})

  • Js Data Types

    flowchart TD L1([JS 数据类型]) L1-->L21(基本类型 数值类型) L1-->L22(对象类型 引用类型) L21-->L301(字符串) L21-->L302(数字) L21-->L303(布尔) L21-->L304(undefined) L21-->L305(null) L22-->L311(对象) L22-->L312(数组) L22-->L313(函数) flowchart TD L1([JS 数据类型判断方法]) L1-->L21(typeof) L1-->L22(instanceof) L1-->L23("===") L21--可以判断-->L311(字符串 数字 布尔 undefined function) L21--不可以判断-->L312(null Vs Object Object Vs Array) L22-->L321(对象的具体类型) L23-->L33(null, undefined)

  • localStorage-setItem()-存入的是-string

    localStorage.setItem('flag', 0) // 存入 int let a= localStorage.getItem('flag') // 取出的是 string '0' console.log(typeof(a)) // string

  • js-数组-for----in---中的-key-返回的是-string

    js 数组 for… in.. 中的 key 返回的是 string

  • html中的友情链接不被`爱站`和`站长工具`的友链收录-

    百度上原因说可能是 服务器开启了硬件防火墙; 自己遇到的是部署在虚拟主机上的项目, 不涉及硬件防火墙; 打开网页源代码, 发现友情链接为空, 原来是通过ajax传递过来的友情链接, 换成非ajax即可被正常收录

  • html-字体大小-font-size-不一至时的垂直对齐问题

    Xx, 就如 Xx , 默认是文本底部对齐, 设置父元素的 text-align:middle; 可以令文本完全垂直对齐 原文见: https://blog.csdn.net/qq_30541261/article/details/79754478
🍀