feat: can also see the menu without permission, but jump to 403

Author: vince292007

apps/web-antd/src/locales/langs/en-US.json

@@ -8,6 +8,7 @@
         "backendControl": "Backend Control",
         "pageAccess": "Page Access",
         "buttonControl": "Button Control",
+        "menuVisible403": "Menu Visible(403)",
         "superVisible": "Visible to Super",
         "adminVisible": "Visible to Admin",
         "userVisible": "Visible to User"

apps/web-antd/src/locales/langs/zh-CN.json

@@ -8,6 +8,7 @@
         "backendControl": "后端控制",
         "pageAccess": "页面访问",
         "buttonControl": "按钮控制",
+        "menuVisible403": "菜单可见(403)",
         "superVisible": "Super 可见",
         "adminVisible": "Admin 可见",
         "userVisible": "User 可见"

apps/web-antd/src/router/routes/modules/demos.ts

@@ -54,6 +54,19 @@ const routes: RouteRecordRaw[] = [
                   title: $t('page.demos.access.buttonControl'),
                 },
               },
+              {
+                name: 'AccessFrontendMenuVisible403',
+                path: 'menu-visible-403',
+                component: () =>
+                  import('#/views/demos/access/frontend/menu-visible-403.vue'),
+                meta: {
+                  authority: ['no-body'],
+                  icon: 'mdi:button-cursor',
+                  menuVisibleWithForbidden: true,
+                  title: $t('page.demos.access.menuVisible403'),
+                },
+              },
+
               {
                 name: 'AccessFrontendSuperVisible',
                 path: 'super-visible',

apps/web-antd/src/views/demos/access/frontend/menu-visible-403.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/universal-ui';
+
+defineOptions({ name: 'AccessFrontendAccessTest2' });
+</script>
+
+<template>
+  <Fallback
+    description="当前页面用户不可见，会被重定向到403页面"
+    status="comming-soon"
+    title="页面访问测试"
+  />
+</template>

packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.ts

@@ -34,14 +34,12 @@ async function generateRoutesByFrontend(
  */
 function hasAuthority(route: RouteRecordRaw, access: string[]) {
   const authority = route.meta?.authority;
-
   if (!authority) {
     return true;
   }
-  return (
-    access.some((value) => authority.includes(value)) ||
-    menuHasVisibleWithForbidden(route)
-  );
+  const canAccess = access.some((value) => authority.includes(value));
+
+  return canAccess || (!canAccess && menuHasVisibleWithForbidden(route));
 }
 
 /**
@@ -57,7 +55,11 @@ function hasVisible(route?: RouteRecordRaw) {
  * @param route
  */
 function menuHasVisibleWithForbidden(route: RouteRecordRaw) {
-  return !!route.meta?.menuVisibleWithForbidden;
+  return (
+    !!route.meta?.authority &&
+    Reflect.has(route.meta || {}, 'menuVisibleWithForbidden') &&
+    !!route.meta?.menuVisibleWithForbidden
+  );
 }
 
 export { generateRoutesByFrontend, hasAuthority, hasVisible };