feat(rbac-web): 前端页面级权限与「权限与角色」管理页
- 新增 rbac 的 api/types/mock,对接后端 catalog/roles/users;mock 模式与后端 PageCatalog 完全对齐 - EffectivePermissions 增加 allowedPages,auth store 新增 hasPage 判定 - 路由守卫按 route.name = 页面 Key 做页面级放行,无权时跳转到 scope 内首个可访问页面;AppShell 菜单按 hasPage 过滤 - 路由守卫 switchScope 失败自动重试一次;新增懒加载 chunk 失败整页自愈 onError,修复切页白屏 - PermissionGuard hidden 态改为友好空态提示;AuthRoleView 重写为完整的用户/角色/权限编辑界面
This commit is contained in:
@@ -6,7 +6,12 @@
|
||||
<slot />
|
||||
<div class="pg-mask" />
|
||||
</div>
|
||||
<!-- hidden: 不渲染任何内容 -->
|
||||
<el-empty v-else class="pg-hidden">
|
||||
<template #description>
|
||||
<p class="pg-hidden-title">当前账号无权查看此功能</p>
|
||||
<p class="pg-hidden-hint">控件:{{ widgetId }}。若应为管理员可见,请尝试顶部切换「管理员/运营」或刷新页面。</p>
|
||||
</template>
|
||||
</el-empty>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -24,4 +29,7 @@ const visibility = computed(() => auth.widgetOf(props.widgetId))
|
||||
position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3);
|
||||
pointer-events: all; cursor: not-allowed;
|
||||
}
|
||||
.pg-hidden { padding: 48px 16px; }
|
||||
.pg-hidden-title { margin: 0 0 6px; font-size: 14px; color: var(--mg-text-light, #fff); }
|
||||
.pg-hidden-hint { margin: 0; font-size: 12px; color: var(--mg-text-muted, rgba(255,255,255,.65)); }
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-radio-group v-model="current" size="small" @change="onChange">
|
||||
<el-radio-button label="Platform">管理员</el-radio-button>
|
||||
<el-radio-button label="RCSMonitor">运营</el-radio-button>
|
||||
<el-radio-group :model-value="current" size="small" @change="onChange">
|
||||
<el-radio-button value="Platform">管理员</el-radio-button>
|
||||
<el-radio-button value="RCSMonitor">运营</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
@@ -15,15 +15,20 @@ import type { Scope } from '@/types/auth'
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
// 会话 45 AR-6:switchScope 已变成异步(调后端 /auth/switch-scope)。
|
||||
// computed.set 不能 await,只能 fire-and-forget 并在 catch 里弹错。
|
||||
const current = computed<Scope>({
|
||||
get: () => auth.scope ?? 'Platform',
|
||||
set: (v) => { void switchAndNavigate(v) }
|
||||
})
|
||||
// 单向受控 + 仅 @change 触发:避免「v-model set 与 @change 各触发一次」导致的
|
||||
// 双重 switchScope 请求 / 双重导航竞态(旧实现会让一次点击发起两次切换,
|
||||
// 偶发造成 scope 与 effectivePermissions 不一致 → 配置页 PermissionGuard 误判隐藏)。
|
||||
const current = computed<Scope>(() => auth.scope ?? 'Platform')
|
||||
|
||||
let switching = false
|
||||
async function onChange(v: string | number | boolean | undefined) {
|
||||
await switchAndNavigate(v as Scope)
|
||||
if (switching) return
|
||||
switching = true
|
||||
try {
|
||||
await switchAndNavigate(v as Scope)
|
||||
} finally {
|
||||
switching = false
|
||||
}
|
||||
}
|
||||
|
||||
async function switchAndNavigate(scope: Scope) {
|
||||
|
||||
Reference in New Issue
Block a user