基于访问权限的Docusaurus动态侧边栏内容实现方案问询

完全可以实现这个需求，核心是基于用户权限动态过滤侧边栏内容，同时配合路径级访问控制确保未授权用户无法访问受限文档。以下是具体实现方案：

1. 定义带权限标记的完整侧边栏配置 #

在sidebars.js中维护包含所有文档的侧边栏，并给每个文档项添加权限标记：

module.exports = {
  fullSidebar: [
    {
      type: 'doc',
      id: 'public/intro',
      metadata: { permission: 'public' }
    },
    {
      type: 'doc',
      id: 'authenticated/advanced-guide',
      metadata: { permission: 'authenticated' }
    },
    {
      type: 'doc',
      id: 'admin/operation-manual',
      metadata: { permission: 'admin' }
    },
    // 更多文档项...
  ]
};

2. 自定义侧边栏组件实现动态过滤 #

复制Docusaurus默认的侧边栏组件到src/theme/Sidebar/index.js，在组件内部根据用户权限过滤渲染内容：

import React from 'react';
import Sidebar from '@docusaurus/theme-classic/lib/theme/Sidebar';
import { fullSidebar } from '../../../sidebars';

// 实际项目中从登录状态/后端接口获取用户权限
const getUserPermission = () => {
  return localStorage.getItem('userRole') || 'public';
};

// 根据权限过滤侧边栏项
const filterSidebarItems = (items, userPermission) => {
  return items.filter(item => {
    const itemPerm = item.metadata?.permission;
    if (!itemPerm) return true; // 无标记项默认公开

    switch(userPermission) {
      case 'admin':
        return true;
      case 'authenticated':
        return itemPerm === 'public' || itemPerm === 'authenticated';
      default: // 未登录用户
        return itemPerm === 'public';
    }
  });
};

export default function CustomSidebar(props) {
  const userPerm = getUserPermission();
  const filteredItems = filterSidebarItems(fullSidebar, userPerm);
  return <Sidebar {...props} items={filteredItems} />;
}

3. 配合路径级访问控制拦截未授权访问 #

在src/pages/_app.js中添加路由守卫，防止用户手动输入URL访问受限文档：

import React from 'react';
import { useLocation, Redirect } from '@docusaurus/router';

export default function App({ Component, pageProps }) {
  const location = useLocation();
  const userPerm = localStorage.getItem('userRole') || 'public';

  // 路径与所需权限的映射
  const pathPermMap = {
    '/docs/authenticated/': 'authenticated',
    '/docs/admin/': 'admin'
  };

  // 检查当前路径是否需要权限
  const requiredPerm = Object.keys(pathPermMap).find(path => location.pathname.startsWith(path));
  if (requiredPerm) {
    const hasAccess = userPerm === 'admin' || userPerm === pathPermMap[requiredPerm];
    if (!hasAccess) {
      return <Redirect to="/docs/public/intro" />;
    }
  }

  return <Component {...pageProps} />;
}

注意事项 #

• 生产环境中不要仅依赖前端localStorage判断权限，需配合后端接口验证用户角色，防止篡改
• 敏感文档建议在后端层面做访问控制，避免用户通过直接请求文档资源获取内容

内容的提问来源于stack exchange，提问作者Kazuki