ゴゴゴゴゴ
Skip to content
JOJO
首页文章项目知识库相册音乐
全站搜索
  • Navigate
  • Go to Page
  • escClose
© 2026 JOJOBuilt with Next.js

四种声音一个时代

这里收藏周杰伦、王力宏、陶喆与林俊杰的专辑,也把四位创作者放回完整唱片的语境。陶喆以松弛的律动重塑华语 R&B,周杰伦把说唱、古典与中国式旋律带进流行音乐,王力宏在抒情、摇滚和东方元素之间拓宽制作边界,林俊杰则用细密旋律与宽阔声线记录城市情绪。这里不打乱曲序,也不把专辑压缩成热门单曲;挑一张封面,从第一首听到最后一首,感受开场、中段与尾声如何共同完成一段叙事。

左右滑动浏览,轻触封面,从第一首开始听

正在播放的唱片

选择一首歌曲查看歌词
专辑封面

专辑

    请选择一张唱片等待选曲
    0:00
    0:00

    键盘快捷键

    搜索
    / 或 ⌘K
    回到首页
    G H
    博客列表
    G B
    切换主题
    T
    关闭弹窗
    Esc
    显示帮助
    ?

    按 Esc 关闭此窗口

    Blog550
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南

    RBAC权限设计1

    2025年10月14日 · 19 min
    ChatGPTClaude

    一个用户在使用系统做某些操作的时候,系统会去数据库或者其他持久化的地方查询该用户所拥有的权限,然后根据查询出的结果判断此次操作是否正常

    简单的情况,一张表存储用户的权限,然后直接查询判断即可。但用户量足够大又或者权限非常多的话怎么办呢?一个新的系统需要接入用户、权限的时候,又该怎么办?

    RBAC 权限设计

    什么是 RBAC 模型

    为了解决前述的问题,我们将引入 RBAC 权限管理设计。

    RBAC(Role-Based Access Control) 的三要素即用户、角色与权限。 用户通过赋予的角色,执行角色所拥有的权限。

    image-20250211160505815

    RBAC 引入之后的流程如上图所示,用户在进入系统之后,会先进行角色判断,再根据对应的角色查询所匹配的权限,最后根据返回结果来判断是否可执行。

    直观来说,整个调用的链路被拉长了,直接使用用户与权限的绑定关系,明显速度会更快。

    更加直观的区别如下图:

    image-20250211160928747

    这种记录每个用户有什么权限的方式,其实也有专业的说法,叫做ACL(Access Control List)访问控制表

    而RBAC是下面这个样子的:

    image-20250211161507798

    在具体处理的时候,先给角色分配权限,然后给用户分配对应的角色

    比如,有A,B,C三个权限,用户也有三个张三,李四,王五,首先如果是ACL的方式,在分配时,就需要每个用户分别分配ABC三个权限。如果是RBAC的方式,只需要将三个权限分配给一个角色,比如管理员角色,然后这一个角色分配给用户就行。

    这样说好像不是太直观,换个说法,当权限有增删改的时候,如果我们新增了一个D的权限,如果要给三个用户分配就需要依次再分配三次,但是RBAC的话,只需要将这个新增的权限,给到对应的角色即可。

    通过下述的表格数据,我们来对比一下两个方案的差别:

    方案用户量权限数权限表数据量
    用户 -> 权限11010 * 1
    用户 -> 权限100,0001010 * 100,000
    用户 -> 角色 -> 权限11010 * Role
    用户 -> 角色 -> 权限100,0001010 * Role

    上面的数据可能看得有些懵懂,我们转换文字版本来解释一下:

    如果一个用户拥有 10 个权限的话,使用用户权限关联表后,一个用户就会有 10 条数据,10 万个用户的话就有 100 万的数据,代表着当一个用户进入系统之后,我们需要在百万级别的数据表中查询对应的权限数据。

    而使用 RBAC 之后,当用户进入系统之后,先查询用户对应的角色,再查询角色映射对应的权限表,即便是一个角色对应一个用户,那么查询量也就是在 10 * 10 ,比直接查询百万数据表的数据量直线下降,如上对比可以看出,使用 RBAC 能大量节约查询成本与时间。

    同时一个角色可以挂载多个权限,从实际使用场景、覆盖的范围以及性能优化上都比单纯的用户-权限表更高效。

    其实,RBAC模型还有细分,我们上面这种划分,基本是最简单的用户角色权限管理模型RBAC0,除此之外还有RBAC1、RBAC2、RBAC3,这几个都是在RBAC0的基础上,在进行细分,比如:一个角色可以从另一个角色继承许可权,角色还具有上下级的关系;角色的动态职责和静态职责分离,甚至还可以有用户组,角色组的处理。我们这里就不纠结太多,理解RBAC0模型就已经足够了。

    RBAC表结构设计

    一般情况下,RBAC0模型设计数据库表结构如下:

    image-20250211164042486

    针对上面这样的数据表设计,我们在代码的entity中,应该是下面这样的设计:

    image-20250211164717215

    用户、角色、权限都是多对多关系

    工程创建

    还是直接通过nest cli命令创建项目

    Terminal window
    nest n rbac-test -g -p pnpm

    先安装必要的依赖

    Terminal window
    pnpm add @nestjs/typeorm typeorm mysql2 -S

    创建user模块

    nest g res user --no-spec

    还是先在AppModule中引入TypeOrmModule

    import { Module } from '@nestjs/common'
    import { AppController } from './app.controller'
    import { AppService } from './app.service'
    import { TypeOrmModule } from '@nestjs/typeorm'
    import { UserModule } from './user/user.module'
    @Module({
    imports: [
    TypeOrmModule.forRoot({
    type: 'mysql',
    host: 'localhost',
    port: 3306,
    username: 'root',
    password: '123456',
    database: 'rbac_test',
    synchronize: true,
    logging: true,
    entities: [__dirname + '/**/*.entity{.ts,.js}'],
    timezone: 'Z',
    }),
    UserModule,
    ],
    controllers: [AppController],
    providers: [AppService],
    })
    export class AppModule {}

    分别创建User、Role、Permission实体:

    import {
    Entity,
    PrimaryGeneratedColumn,
    Column,
    ManyToMany,
    JoinTable,
    } from 'typeorm'
    import { Role } from './role.entity'
    @Entity()
    export class User {
    @PrimaryGeneratedColumn()
    id: number
    @Column()
    username: string
    @Column()
    password: string
    @ManyToMany(() => Role)
    @JoinTable({
    name: 'user_role_relation',
    })
    roles: Role[]
    }
    import {
    Column,
    Entity,
    JoinTable,
    ManyToMany,
    PrimaryGeneratedColumn,
    } from 'typeorm'
    import { Permission } from './permission.entity'
    @Entity()
    export class Role {
    @PrimaryGeneratedColumn()
    id: number
    @Column()
    name: string
    @ManyToMany(() => Permission)
    @JoinTable({
    name: 'role_permission_relation',
    })
    permissions: Permission[]
    }
    import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'
    @Entity()
    export class Permission {
    @PrimaryGeneratedColumn()
    id: number
    @Column()
    name: string
    }

    现在通过pnpm run start:dev启动服务,就可以直接帮我们在rbac_test数据库创建相应的表了。

    数据录入

    为了测试,我们通过对象的方式直接插入数据,在service中做出处理

    @Injectable()
    export class UserService {
    @InjectEntityManager()
    private entityManager: EntityManager
    async initData() {
    const user1 = new User()
    user1.username = 'jack'
    user1.password = '123456'
    const user2 = new User()
    user2.username = 'rose'
    user2.password = '123456'
    const user3 = new User()
    user3.username = 'tom'
    user3.password = '123456'
    const role1 = new Role()
    role1.name = '超级管理员'
    const role2 = new Role()
    role2.name = '员工管理员'
    const role3 = new Role()
    role3.name = '部门管理员'
    const permission1 = new Permission()
    permission1.name = '新增 员工'
    const permission2 = new Permission()
    permission2.name = '更新 员工'
    const permission3 = new Permission()
    permission3.name = '删除 员工'
    const permission4 = new Permission()
    permission4.name = '查询 员工'
    const permission5 = new Permission()
    permission5.name = '新增 部门'
    const permission6 = new Permission()
    permission6.name = '更新 部门'
    const permission7 = new Permission()
    permission7.name = '删除 部门'
    const permission8 = new Permission()
    permission8.name = '查询 部门'
    role1.permissions = [
    permission1,
    permission2,
    permission3,
    permission4,
    permission5,
    permission6,
    permission7,
    permission8,
    ]
    role2.permissions = [permission1, permission2, permission3, permission4]
    role3.permissions = [permission5, permission6, permission7, permission8]
    user1.roles = [role1]
    user2.roles = [role2]
    user3.roles = [role3]
    await this.entityManager.save(Permission, [
    permission1,
    permission2,
    permission3,
    permission4,
    permission5,
    permission6,
    permission7,
    permission8,
    ])
    await this.entityManager.save(Role, [role1, role2, role3])
    await this.entityManager.save(User, [user1, user2, user3])
    }
    }

    为了外部能够访问,controller中添加路由:

    @Controller('user')
    export class UserController {
    constructor(private readonly userService: UserService) {}
    @Get('initData')
    async initData() {
    await this.userService.initData()
    return '初始化数据成功'
    }
    //......
    }

    在apiFox中访问路由,就能直接帮我们创建相关数据了

    image-20250211175021607

    登录与JWT处理

    接下来就和上节课一样,处理一下登录和JWT,登录同样做一下简单验证,所以我们先导入需要用到的包,登录主要是class-validator装饰器

    Terminal window
    pnpm add class-validator class-transformer -S

    然后和之前一样,我们在LoginUserDto上做一下简单的验证

    import { IsNotEmpty } from 'class-validator'
    export class LoginUserDto {
    @IsNotEmpty({
    message: '用户名不能为空',
    })
    username: string
    @IsNotEmpty({
    message: '密码不能为空',
    })
    password: string
    }

    在Controller上添加login方法,并且对参数添加验证管道

    @Post('login')
    async login(@Body(ValidationPipe) user: LoginUserDto) {
    console.log(user);
    return '登录成功';
    }

    同样现在就已经有参数的验证了:

    image-20250212111729617

    接下来实现查询数据库的逻辑,在 UserService 添加 login 方法:

    async login(loginUserDto: LoginUserDto) {
    const user = await this.entityManager.findOne(User, {
    where: {
    username: loginUserDto.username,
    },
    relations: {
    roles: true,
    },
    });
    if (!user) {
    throw new HttpException('不存在该用户', HttpStatus.ACCEPTED);
    }
    if (user.password !== loginUserDto.password) {
    throw new HttpException('密码不正确', HttpStatus.ACCEPTED);
    }
    return user;
    }

    使用entityManager.findOne方法查询User信息,并且通过relations关联查出Role角色的信息,现在Controller中就可以调用Service里的login方法测试一下:

    @Post('login')
    async login(@Body(ValidationPipe) user: LoginUserDto) {
    const result = await this.userService.login(user);
    console.log(result);
    return result;
    }

    image-20250212112420597

    登录成功之后,把相关信息存放到JWT中,首先引入JWT相关包

    pnpm add @nestjs/jwt -S

    首先还是直接全局配置JWT,在AppMoudle中配置一下:

    import { Module } from '@nestjs/common'
    import { AppController } from './app.controller'
    import { AppService } from './app.service'
    import { TypeOrmModule } from '@nestjs/typeorm'
    import { UserModule } from './user/user.module'
    import { JwtModule } from '@nestjs/jwt'
    @Module({
    imports: [
    JwtModule.register({
    global: true,
    secret: 'MySecret',
    signOptions: { expiresIn: '1d' },
    }),
    TypeOrmModule.forRoot({
    type: 'mysql',
    host: 'localhost',
    port: 3306,
    username: 'root',
    password: '123456',
    database: 'rbac_test',
    synchronize: true,
    logging: true,
    entities: [__dirname + '/**/*.entity{.ts,.js}'],
    timezone: 'Z',
    }),
    UserModule,
    ],
    controllers: [AppController],
    providers: [AppService],
    })
    export class AppModule {}

    global设置为全局,这样不用在其他模块每次都引用。现在我们可以在login登录成功之后,存在JWT信息

    import {
    Body,
    Controller,
    Get,
    Inject,
    Post,
    ValidationPipe,
    } from '@nestjs/common'
    import { UserService } from './user.service'
    import { LoginUserDto } from './dto/login-user.dto'
    import { JwtService } from '@nestjs/jwt'
    @Controller('user')
    export class UserController {
    @Inject(JwtService)
    private jwtService: JwtService
    constructor(private readonly userService: UserService) {}
    @Post('login')
    async login(@Body(ValidationPipe) user: LoginUserDto) {
    const result = await this.userService.login(user)
    const token = this.jwtService.sign({
    user: {
    username: result.username,
    roles: result.roles,
    },
    })
    return {
    token,
    }
    }
    }

    image-20250212113129073

    为了验证登录之后jwt的处理,新添加两个模块employee和department

    nest g res employee --no-spec
    nest g res departmen --no-spec

    两个模块都有对应的controller,现在都能进行简单的访问,具体内容我们就不再进行修改了,主要是现在当然这两个模块的路由,我们还是都能够访问到的

    image-20250212131519526

    当然,我们现在的目的是,如果没有请求头没有携带JWT信息,就不允许访问。

    所以,和之前一样,同样可以创建登录守卫,进行处理

    Terminal window
    nest g guard login --no-spec --flat

    在LoginGuard中处理一下业务

    import {
    CanActivate,
    ExecutionContext,
    Inject,
    Injectable,
    UnauthorizedException,
    } from '@nestjs/common'
    import { JwtService } from '@nestjs/jwt'
    import { Observable } from 'rxjs'
    import { Request } from 'express'
    @Injectable()
    export class LoginGuard implements CanActivate {
    @Inject(JwtService)
    private jwtService: JwtService
    canActivate(
    context: ExecutionContext
    ): boolean | Promise<boolean> | Observable<boolean> {
    const request: Request = context.switchToHttp().getRequest()
    const authorization = request.headers.authorization
    if (!authorization) {
    throw new UnauthorizedException('请先登录')
    }
    try {
    const token = authorization.split(' ')[1]
    const data = this.jwtService.verify(token)
    console.log(data)
    return true
    } catch (e) {
    throw new UnauthorizedException('token 失效,请重新登录 ---' + e.message)
    }
    }
    }

    Controller中加入登录守卫

    @Controller('employee')
    export class EmployeeController {
    constructor(private readonly employeeService: EmployeeService) {}
    @Post()
    @UseGuards(LoginGuard)
    create(@Body() createEmployeeDto: CreateEmployeeDto) {
    return this.employeeService.create(createEmployeeDto)
    }
    @Get()
    @UseGuards(LoginGuard)
    findAll() {
    return this.employeeService.findAll()
    }
    // .....
    }

    当我们头信息没有携带token信息的时候

    image-20250212132802424

    当登录之后,头信息中携带token信息

    image-20250212132737838

    但是我们有两个模块,而且每个模块里面的方法都需要去处理守卫,直接把守卫放在路由上太麻烦,当然我们也可以将守卫放在Controller类上。这里我们干脆直接将守卫放在全局,做成全局守卫

    @Module({
    // ......
    providers: [
    AppService,
    {
    provide: 'APP_GUARD',
    useClass: LoginGuard,
    },
    ],
    })
    export class AppModule {}

    这样做之后,无论是Employee模块,还是Department模块,就全部加上了守卫

    image-20250212133604681

    image-20250212133648496

    但是现在问题又出来了,设置为全局守卫之后,虽然方便,但是像login这样的登录,也被加入了守卫,像这样的路由,应该是可以直接访问的。

    image-20250212133819650

    其实无非就是对于一些需要验证的路由或者controller,我们需要过滤一下,而不需要验证的,就直接放行。

    对于这种,我们可以使用自定义装饰器帮我们来处理这个问题。

    在src下直接添加custom-decorator.ts专门来存放自定义装饰器

    import { SetMetadata } from '@nestjs/common'
    export const LoginRequired = () => SetMetadata('LoginRequired', true)

    我们在需要验证的Employee和Department的Controller上,加上自定义装饰器

    @Controller('department')
    @LoginRequired()
    export class DepartmentController {
    constructor(private readonly departmentService: DepartmentService) {}
    ......
    }
    @Controller('employee')
    @LoginRequired()
    export class EmployeeController {
    constructor(private readonly employeeService: EmployeeService) {}
    ......
    }

    然后,我们在登录守卫中,取出@LoginRequired修饰目标 handler 的 metadata 来判断是否需要登录

    @Injectable()
    export class LoginGuard implements CanActivate {
    @Inject()
    private reflector: Reflector;
    @Inject(JwtService)
    private jwtService: JwtService;
    canActivate(
    context: ExecutionContext,
    ): boolean | Promise<boolean> | Observable<boolean> {
    const request: Request = context.switchToHttp().getRequest();
    const isLoginRequired = this.reflector.getAllAndOverride('LoginRequired', [
    context.getClass(),
    context.getHandler(),
    ]);
    console.log('---', isLoginRequired);
    if (!isLoginRequired) {
    return true;
    }
    const authorization = request.headers.authorization;
    if (!authorization) {
    throw new UnauthorizedException('请先登录');
    }
    try {
    const token = authorization.split(' ')[1];
    const data = this.jwtService.verify(token);
    console.log(data);
    return true;
    } catch (e) {
    throw new UnauthorizedException('token 失效,请重新登录 ---' + e.message);
    }
    }
    }

    通过reflector.getAllAndOverride来获取类装饰器上的内容,如果没有@LoginRequired修饰的,就直接返回undefined,下面的判断就直接放行就行了。

    但是这样还不够,我们还需要再做登录用户的权限控制,某个用户在访问某个路由的时候,如果没有权限,也应该禁止访问。我们可以进行下面的处理:

    1、获取用户所具有的角色,拥有哪些权限

    2、路由方法需要什么具体的权限才能访问

    3、判断用户拥有的权限和路由权限是否匹配,如果匹配才放行

    所以,根据这样的想法:

    1、首先在UserService先实现根据RoleId查询关联权限的操作

    async findRolesByIds(roleIds: number[]) {
    return this.entityManager.find(Role, {
    where: {
    id: In(roleIds),
    },
    relations: {
    permissions: true,
    },
    });
    }

    2、自定义装饰器permissionRequired修饰具体路由

    import { SetMetadata } from '@nestjs/common'
    export const LoginRequired = () => SetMetadata('LoginRequired', true)
    export const PermissionRequired = (...permissions: string[]) =>
    SetMetadata('PermissionRequired', permissions)

    在Controller的路由上使用:

    // 员工Controller
    @Controller('employee')
    @LoginRequired()
    export class EmployeeController {
    constructor(private readonly employeeService: EmployeeService) {}
    @Post()
    @PermissionRequired('新增 员工')
    create(@Body() createEmployeeDto: CreateEmployeeDto) {
    return this.employeeService.create(createEmployeeDto);
    }
    @Get()
    @PermissionRequired('查询 员工')
    findAll() {
    return this.employeeService.findAll();
    }
    //......
    }
    // 部门Controller
    @Controller('department')
    @LoginRequired()
    export class DepartmentController {
    constructor(private readonly departmentService: DepartmentService) {}
    @Post()
    @PermissionRequired('新增 部门')
    create(@Body() createDepartmentDto: CreateDepartmentDto) {
    return this.departmentService.create(createDepartmentDto);
    }
    @Get()
    @PermissionRequired('查询 部门')
    findAll() {
    return this.departmentService.findAll();
    }

    3、创建permissionGuard守卫,通过用户拥有权限与路由装饰器规定权限进行匹配,如果成功,则方向,所以首先还是创建守卫

    Terminal window
    nest g guard permission --no-spec --flat

    同样声明成全局守卫:

    providers: [
    AppService,
    {
    provide: 'APP_GUARD',
    useClass: LoginGuard,
    },
    {
    provide: 'APP_GUARD',
    useClass: PermissionGuard,
    },
    ],

    这里permissionGuard具体业务实现有几个问题:

    1、需要获取当前用户的角色

    2、需要从userService中获取角色具有的所有权限

    3、用户权限与路由权限进行匹配

    对于获取当前用户的角色,我们可以从JWT中再获取一次,当然,也能在之前通过LoginGuard获取出来的数据再通过request进行传递,所以我们先修改一下之前LoginGuard里面的代码:

    @Injectable()
    export class LoginGuard implements CanActivate {
    @Inject()
    private reflector: Reflector;
    @Inject(JwtService)
    private jwtService: JwtService;
    canActivate(
    context: ExecutionContext,
    ): boolean | Promise<boolean> | Observable<boolean> {
    // ......
    try {
    const token = authorization.split(' ')[1];
    const data = this.jwtService.verify(token);
    console.log(data);
    // 注意request上并没有user属性,因此需要类型处理,我们这里简单处理为any
    (request as any).user = data.user;
    return true;
    } catch (e) {
    throw new UnauthorizedException('token 失效,请重新登录 ---' + e.message);
    }
    }
    }

    permissionGuard中处理:

    import {
    CanActivate,
    ExecutionContext,
    Inject,
    Injectable,
    UnauthorizedException,
    } from '@nestjs/common'
    import { UserService } from './user/user.service'
    import { Reflector } from '@nestjs/core'
    import { Permission } from './user/entities/permission.entity'
    @Injectable()
    export class PermissionGuard implements CanActivate {
    @Inject(UserService)
    private userService: UserService
    @Inject()
    private reflector: Reflector
    async canActivate(context: ExecutionContext): Promise<boolean> {
    const request = context.switchToHttp().getRequest()
    const user = request.user
    if (!user) {
    return true
    }
    const roles = await this.userService.findRolesByIds(
    user.roles.map((item) => item.id)
    )
    const permissions: Permission[] = roles.reduce((acc, cur) => {
    acc.push(...cur.permissions)
    return acc
    }, [])
    console.log(permissions)
    console.log('拥有的权限---', permissions)
    const permissionRequired = this.reflector.getAllAndOverride(
    'PermissionRequired',
    [context.getClass(), context.getHandler()]
    )
    console.log('路由权限---', permissionRequired)
    // 如果没有设置权限,则直接通过
    if (!permissionRequired) {
    return true
    }
    // 拥有权限与路由权限进行对比
    for (let i = 0; i < permissionRequired.length; i++) {
    const curPermission = permissionRequired[i]
    const found = permissions.find((item) => item.name === curPermission)
    console.log('found---', found)
    if (!found) {
    throw new UnauthorizedException('该接口你没有访问的权限')
    }
    }
    return true
    }
    }

    由于用到了UserService,所以,别忘记,需要在User模块导出UserService

    @Module({
    controllers: [UserController],
    providers: [UserService],
    exports: [UserService],
    })
    export class UserModule {}
    返回 BlogNest
    上一篇通过环境变量获取配置信息下一篇RBAC权限设计2
    Skip toc
    • RBAC 权限设计
      • 什么是 RBAC 模型
      • RBAC表结构设计
      • 工程创建
      • 数据录入
      • 登录与JWT处理
    Table of Contents
    • RBAC 权限设计
      • 什么是 RBAC 模型
      • RBAC表结构设计
      • 工程创建
      • 数据录入
      • 登录与JWT处理
    > share on twitter