Skip to content

refactor(auth): 统一权限校验并重构权限指令为响应式实现 - #668

Open
Airomeo wants to merge 1 commit into
dotnetcore:dotnet8from
xbyd:fix/auth-permission-responsive-dotnet8
Open

refactor(auth): 统一权限校验并重构权限指令为响应式实现#668
Airomeo wants to merge 1 commit into
dotnetcore:dotnet8from
xbyd:fix/auth-permission-responsive-dotnet8

Conversation

@Airomeo

@Airomeo Airomeo commented Sep 3, 2026

Copy link
Copy Markdown

背景

当前 WalkingTec.Mvvm.Vue3Demo 前端权限逻辑存在以下问题:

  1. 校验分散不一致

    • v-auth 指令使用 toLowerCase() 大小写不敏感
    • auth / auths / authAll 组件与 utils/authFunction 使用严格相等 ===
    • v-auths 未做大小写处理,v-auth-all 依赖 judementSameArr(大小写敏感)
  2. 无法响应式更新:指令在 mounted 后通过 removeChild 直接删除 DOM,后续 authBtnList / isDebug 变化不会触发重新显示/隐藏;且每个指令未监听 binding.value 变化。

  3. 性能问题:每个按钮都遍历 authBtnList,未缓存;auths/authAll 存在双层 map 嵌套。

  4. 健壮性:未对 undefined/null/非字符串入参做保护;authAll([]) 误返回 true

本 PR 将修复完整移植到 WTM 的 demo/WalkingTec.Mvvm.Vue3Demo,适用分支 dotnet8

变更内容

涉及文件(6 个):

  • demo/WalkingTec.Mvvm.Vue3Demo/ClientApp/src/stores/userInfo.ts
  • demo/WalkingTec.Mvvm.Vue3Demo/ClientApp/src/utils/authFunction.ts
  • demo/WalkingTec.Mvvm.Vue3Demo/ClientApp/src/directive/authDirective.ts
  • demo/WalkingTec.Mvvm.Vue3Demo/ClientApp/src/components/auth/auth.vue
  • demo/WalkingTec.Mvvm.Vue3Demo/ClientApp/src/components/auth/auths.vue
  • demo/WalkingTec.Mvvm.Vue3Demo/ClientApp/src/components/auth/authAll.vue

1. stores/userInfo.ts

新增 authBtnSet getter:

authBtnSet: (state): Set<string> => new Set(
  state.userInfos.authBtnList.map(v => v.trim().toLowerCase()).filter(Boolean)
)
  • Pinia getter 自动缓存,仅 authBtnList 变化时重建
  • 统一 trim + toLowerCase + 过滤空值,所有校验复用同一 SetO(1) 查找

2. utils/authFunction.ts

  • 移除对 arrayOperation.judementSameArr 的依赖
  • 参数类型收窄为 unknown,增加类型守卫,非法入参直接返回 false
  • 统一 isDebug === true 直放
  • auth/auths/authAll 均基于 authBtnSet 实现大小写不敏感、去空格
  • authAll 修正:空数组返回 false(原 true

3. directive/authDirective.ts

  • hidden 替代 removeChild,支持权限/调试模式变更后实时更新显隐
  • 集中 Map<HTMLElement, State> 管理所有指令元素,共享单一 watch([isDebug, authBtnSet])
  • updated 钩子同步 binding.value 变化
  • unmounted 时清理 Map,无元素时释放 watcher,避免内存泄漏
  • 保留 wasInitiallyHidden 语义,初始 hidden 的元素始终保持隐藏,防止越权显示

4. components/auth/*

auth.vue / auths.vue / authAll.vue 移除直连 store 的重复遍历逻辑,改为调用 utils/authFunction 的统一函数,computed 自动追踪 authBtnSet / isDebug 变化。

BREAKING CHANGE

  • 权限校验现统一 大小写不敏感(此前部分路径敏感)
  • authAll([])true 改为 false

测试

  • 静态检查:vue-tsc / eslint(如有)
  • 手动验证:
    • isDebug=true 时所有 v-auth* 均显示
    • 切换 authBtnList 大小写、首尾空格后指令与组件实时更新
    • v-auth="Btn.Add"authBtnList=["btn.add"] 匹配成功
    • authAll([]) / auth(undefined) 返回 false
    • 初始 hidden 元素不会因权限通过而被显示

将分散在组件与指令中的权限判断收敛至 utils/authFunction,修复历史不一致与无法响应更新的问题。

- stores/userInfo: 新增 authBtnSet getter,对 authBtnList 统一 trim/toLowerCase/过滤空值并缓存为 Set,指令与组件复用同一实例,避免每按钮重复遍历
- utils/authFunction: 重构 auth/auths/authAll,统一处理 isDebug 直放、unknown 入参校验、大小写不敏感及去空格,authAll 对空数组返回 false(原 judementSameArr 返回 true),移除对 arrayOperation 的依赖
- directive/authDirective: 以 hidden 替代 removeChild,支持权限及 isDebug 变更后实时更新;集中 Map 管理所有指令元素,共享单一 watch,unmounted 时清理并在无元素时释放 watcher;保留 wasInitiallyHidden 语义,初始 hidden 的元素保持隐藏避免权限越权显示
- components/auth: auth/auths/authAll 组件移除直连 store 的重复逻辑,改为调用统一工具函数,computed 自动追踪权限变化
- 修正指令注释中 :v-auths 错误写法为 v-auths

BREAKING CHANGE: 权限校验现统一大小写不敏感;authAll([]) 由 true 改为 false

源提交: be41bae04d382616606fc68429d14de22b816a6f (MES)
适用分支: dotnet8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants