系统级功能 - 面试指南

设计并实现基于 RBAC 模型的前端权限系统,支持页面、功能、数据三级权限控制
- 通过路由守卫和组件级权限指令,实现细粒度的权限控制,安全性提升 95%
- 设计权限缓存和预加载策略,权限校验耗时从 500ms 降至 5ms,用户体验无感知
- 实现动态菜单和按钮权限,支持 10+ 角色、200+ 权限点的灵活配置

// store/permission.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface Permission {
  id: string;
  code: string;
  name: string;
  type: 'page' | 'action' | 'data';
  parentId?: string;
}

interface PermissionStore {
  // 用户权限列表
  permissions: Permission[];
  // 权限码集合(用于快速查找)
  permissionCodes: Set<string>;
  // 角色信息
  roles: string[];
  // 数据权限范围
  dataScope: 'all' | 'dept' | 'self';

  // 设置权限
  setPermissions: (permissions: Permission[]) => void;
  // 检查权限
  hasPermission: (code: string | string[]) => boolean;
  // 检查是否有任一权限
  hasAnyPermission: (codes: string[]) => boolean;
  // 检查是否有全部权限
  hasAllPermissions: (codes: string[]) => boolean;
  // 清空权限
  clearPermissions: () => void;
}

export const usePermissionStore = create<PermissionStore>()(
  persist(
    (set, get) => ({
      permissions: [],
      permissionCodes: new Set(),
      roles: [],
      dataScope: 'self',

      setPermissions: (permissions) => {
        const codes = new Set(permissions.map(p => p.code));

        // 展开父权限
        permissions.forEach(permission => {
          if (permission.parentId) {
            const parts = permission.code.split(':');
            // 添加父权限码
            for (let i = 1; i < parts.length; i++) {
              codes.add(parts.slice(0, i).join(':'));
            }
          }
        });

        set({
          permissions,
          permissionCodes: codes,
        });
      },

      hasPermission: (code) => {
        const { permissionCodes } = get();

        if (typeof code === 'string') {
          return permissionCodes.has(code);
        }

        // 数组形式,检查是否有任一权限
        return code.some(c => permissionCodes.has(c));
      },

      hasAnyPermission: (codes) => {
        const { permissionCodes } = get();
        return codes.some(code => permissionCodes.has(code));
      },

      hasAllPermissions: (codes) => {
        const { permissionCodes } = get();
        return codes.every(code => permissionCodes.has(code));
      },

      clearPermissions: () => {
        set({
          permissions: [],
          permissionCodes: new Set(),
          roles: [],
          dataScope: 'self',
        });
      },
    }),
    {
      name: 'permission-storage',
      // 只持久化必要的数据
      partialize: (state) => ({
        permissions: state.permissions,
        roles: state.roles,
        dataScope: state.dataScope,
      }),
    }
  )
);

// router/guards.ts
import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
import { usePermissionStore } from '@/store/permission';
import { useUserStore } from '@/store/user';

// 权限检查缓存
const permissionCache = new Map<string, boolean>();

export function createPermissionGuard() {
  return async (
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ) => {
    const userStore = useUserStore();
    const permissionStore = usePermissionStore();

    // 未登录,跳转登录页
    if (!userStore.token) {
      next({ path: '/login', query: { redirect: to.fullPath } });
      return;
    }

    // 加载权限(如果还没加载)
    if (permissionStore.permissions.length === 0) {
      try {
        await userStore.fetchPermissions();
      } catch (error) {
        console.error('加载权限失败:', error);
        next({ path: '/403' });
        return;
      }
    }

    // 检查路由权限
    const requiredPermissions = to.meta.permissions as string[] | undefined;

    if (!requiredPermissions || requiredPermissions.length === 0) {
      // 无权限要求,直接放行
      next();
      return;
    }

    // 检查缓存
    const cacheKey = `${to.path}:${requiredPermissions.join(',')}`;
    if (permissionCache.has(cacheKey)) {
      const hasPermission = permissionCache.get(cacheKey)!;
      if (hasPermission) {
        next();
      } else {
        next({ path: '/403' });
      }
      return;
    }

    // 检查权限(或的关系,有任一权限即可)
    const hasPermission = permissionStore.hasAnyPermission(requiredPermissions);

    // 缓存结果
    permissionCache.set(cacheKey, hasPermission);

    if (hasPermission) {
      next();
    } else {
      next({ path: '/403' });
    }
  };
}

// 清空权限缓存
export function clearPermissionCache() {
  permissionCache.clear();
}

// directives/permission.ts
import { Directive } from 'vue';
import { usePermissionStore } from '@/store/permission';

export const vPermission: Directive = {
  mounted(el, binding) {
    const { value } = binding;
    const permissionStore = usePermissionStore();

    if (value && value.length > 0) {
      const hasPermission = permissionStore.hasAnyPermission(
        Array.isArray(value) ? value : [value]
      );

      if (!hasPermission) {
        // 移除元素
        el.parentNode?.removeChild(el);
      }
    }
  },
};

// components/Permission/Permission.tsx
import { usePermissionStore } from '@/store/permission';

interface PermissionProps {
  code: string | string[];
  mode?: 'any' | 'all'; // any: 有任一权限即显示, all: 需要全部权限
  fallback?: React.ReactNode;
  children: React.ReactNode;
}

export function Permission({
  code,
  mode = 'any',
  fallback = null,
  children,
}: PermissionProps) {
  const permissionStore = usePermissionStore();

  const codes = Array.isArray(code) ? code : [code];

  const hasPermission =
    mode === 'all'
      ? permissionStore.hasAllPermissions(codes)
      : permissionStore.hasAnyPermission(codes);

  return hasPermission ? <>{children}</> : <>{fallback}</>;
}

// utils/menu.ts
import { RouteRecordRaw } from 'vue-router';
import { Permission } from '@/store/permission';

interface MenuItem {
  id: string;
  name: string;
  path: string;
  icon?: string;
  children?: MenuItem[];
  permissions?: string[];
}

export function filterMenusByPermission(
  menus: MenuItem[],
  permissionCodes: Set<string>
): MenuItem[] {
  return menus
    .filter(menu => {
      // 没有权限要求,直接显示
      if (!menu.permissions || menu.permissions.length === 0) {
        return true;
      }
      // 检查是否有权限
      return menu.permissions.some(code => permissionCodes.has(code));
    })
    .map(menu => {
      // 递归过滤子菜单
      if (menu.children && menu.children.length > 0) {
        return {
          ...menu,
          children: filterMenusByPermission(menu.children, permissionCodes),
        };
      }
      return menu;
    })
    .filter(menu => {
      // 过滤掉没有子菜单的父菜单
      if (menu.children) {
        return menu.children.length > 0;
      }
      return true;
    });
}

export function generateRoutesFromMenus(menus: MenuItem[]): RouteRecordRaw[] {
  return menus.map(menu => {
    const route: RouteRecordRaw = {
      path: menu.path,
      name: menu.id,
      meta: {
        title: menu.name,
        icon: menu.icon,
        permissions: menu.permissions,
      },
      component: () => import(`@/views${menu.path}.vue`),
    };

    if (menu.children && menu.children.length > 0) {
      route.children = generateRoutesFromMenus(menu.children);
    }

    return route;
  });
}

实现支持 10+ 语言的国际化方案,覆盖前端全部文本内容
- 基于 react-i18next 设计翻译管理系统,支持命名空间、嵌套翻译、动态参数等特性
- 通过自动提取和翻译脚本,新增多语言工作量减少 80%,翻译遗漏率从 15% 降至 0%
- 实现语言包懒加载和缓存,切换语言响应时间从 2s 降至 200ms

<link rel="alternate" hreflang="zh" href="https://example.com/zh/about" />
<link rel="alternate" hreflang="en" href="https://example.com/en/about" />

/* 原来 */
margin-left: 16px;

/* 改成 */
margin-inline-start: 16px;

.icon {
  transform: scaleX(var(--flip, 1));
}

[dir="rtl"] .icon {
  --flip: -1;
}

// i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend) // 懒加载翻译文件
  .use(LanguageDetector) // 自动检测用户语言
  .use(initReactI18next)
  .init({
    // 默认语言
    fallbackLng: 'zh',

    // 调试模式
    debug: process.env.NODE_ENV === 'development',

    // 命名空间
    ns: ['common', 'user', 'order'],
    defaultNS: 'common',

    // 插值配置
    interpolation: {
      escapeValue: false, // React 已经做了 XSS 防护
    },

    // 后端配置
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      // 添加版本号,利用缓存
      queryStringParams: { v: '1.0.0' },
    },

    // 语言检测配置
    detection: {
      // 检测顺序
      order: ['querystring', 'localStorage', 'navigator'],
      // 缓存用户语言选择
      caches: ['localStorage'],
      // URL 参数名
      lookupQuerystring: 'lang',
    },

    // React 配置
    react: {
      // 使用 Suspense 等待翻译加载
      useSuspense: true,
    },
  });

export default i18n;

// scripts/extract-translations.js
const fs = require('fs-extra');
const path = require('path');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const glob = require('glob');

// 扫描所有源文件
const files = glob.sync('src/**/*.{ts,tsx}', {
  ignore: ['**/*.test.ts', '**/*.spec.ts'],
});

// 提取的翻译 key
const translationKeys = new Set();

files.forEach(file => {
  const content = fs.readFileSync(file, 'utf-8');

  try {
    const ast = parser.parse(content, {
      sourceType: 'module',
      plugins: ['jsx', 'typescript'],
    });

    traverse(ast, {
      // 匹配 t('key') 调用
      CallExpression(path) {
        const { node } = path;

        // 检查是否是 t 函数调用
        if (
          (node.callee.name === 't' ||
            (node.callee.property && node.callee.property.name === 't')) &&
          node.arguments.length > 0
        ) {
          const firstArg = node.arguments[0];

          // 只处理字符串字面量
          if (firstArg.type === 'StringLiteral') {
            translationKeys.add(firstArg.value);
          }
        }
      },
    });
  } catch (error) {
    console.error(`解析文件失败: ${file}`, error.message);
  }
});

// 按命名空间分组
const keysByNamespace = {};

translationKeys.forEach(key => {
  const parts = key.split('.');
  const namespace = parts.length > 1 ? parts[0] : 'common';

  if (!keysByNamespace[namespace]) {
    keysByNamespace[namespace] = new Set();
  }

  keysByNamespace[namespace].add(key);
});

// 生成 JSON 文件
const localesDir = path.resolve(__dirname, '../public/locales');
const languages = ['zh', 'en', 'ja'];

languages.forEach(lang => {
  Object.entries(keysByNamespace).forEach(([namespace, keys]) => {
    const filePath = path.join(localesDir, lang, `${namespace}.json`);

    // 读取现有翻译
    let existing = {};
    if (fs.existsSync(filePath)) {
      existing = fs.readJSONSync(filePath);
    }

    // 合并新 key
    const translations = {};
    Array.from(keys).sort().forEach(key => {
      // 移除命名空间前缀
      const translationKey = key.replace(`${namespace}.`, '');

      // 构建嵌套对象
      const parts = translationKey.split('.');
      let current = translations;

      parts.forEach((part, index) => {
        if (index === parts.length - 1) {
          // 最后一层,设置翻译值
          current[part] = existing[translationKey] || `[${translationKey}]`;
        } else {
          // 中间层,创建对象
          current[part] = current[part] || {};
          current = current[part];
        }
      });
    });

    // 写入文件
    fs.ensureDirSync(path.dirname(filePath));
    fs.writeJSONSync(filePath, translations, { spaces: 2 });

    console.log(`✓ 已生成 ${lang}/${namespace}.json (${keys.size} 个key)`);
  });
});

console.log(`\n总计提取 ${translationKeys.size} 个翻译 key`);

// hooks/useLanguage.ts
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useLocation } from 'react-router-dom';

const SUPPORTED_LANGUAGES = [
  { code: 'zh', name: '简体中文', direction: 'ltr' },
  { code: 'en', name: 'English', direction: 'ltr' },
  { code: 'ja', name: '日本語', direction: 'ltr' },
  { code: 'ar', name: 'العربية', direction: 'rtl' },
];

export function useLanguage() {
  const { i18n } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();

  const currentLanguage = i18n.language;

  const currentLangConfig = SUPPORTED_LANGUAGES.find(
    lang => lang.code === currentLanguage
  );

  // 切换语言
  const changeLanguage = useCallback(
    async (langCode: string) => {
      const langConfig = SUPPORTED_LANGUAGES.find(
        lang => lang.code === langCode
      );

      if (!langConfig) {
        console.error('不支持的语言:', langCode);
        return;
      }

      // 更新 i18n 语言
      await i18n.changeLanguage(langCode);

      // 更新 HTML lang 属性
      document.documentElement.lang = langCode;

      // 更新文字方向
      document.documentElement.dir = langConfig.direction;

      // 更新 URL(如果使用语言前缀路由)
      const pathWithoutLang = location.pathname.replace(/^\/[a-z]{2}/, '');
      navigate(`/${langCode}${pathWithoutLang}${location.search}`);
    },
    [i18n, navigate, location]
  );

  return {
    currentLanguage,
    currentDirection: currentLangConfig?.direction || 'ltr',
    supportedLanguages: SUPPORTED_LANGUAGES,
    changeLanguage,
  };
}

实现支持自定义主题的动态主题系统,提供暗黑、明亮等 5+ 内置主题
- 基于 CSS Variables 设计主题系统,支持运行时切换,响应时间 < 50ms
- 通过 CSS-in-JS 和主题提供者实现组件级主题定制,覆盖率达 100%
- 实现主题持久化和预加载,避免页面闪烁,用户体验提升 40%

:root {
  --color-primary: #1890ff;
  --color-bg: #ffffff;
  --color-text: #000000;
}

[data-theme="dark"] {
  --color-primary: #177ddc;
  --color-bg: #141414;
  --color-text: #ffffff;
}

function generatePalette(primaryColor: string) {
  const color = new TinyColor(primaryColor);
  const palette = [];

  for (let i = 1; i <= 10; i++) {
    const lighten = i < 6 ? (6 - i) * 10 : 0;
    const darken = i > 6 ? (i - 6) * 10 : 0;

    let newColor = color.clone();
    if (lighten > 0) {
      newColor = newColor.lighten(lighten);
    }
    if (darken > 0) {
      newColor = newColor.darken(darken);
    }

    palette.push(newColor.toHexString());
  }

  return palette;
}

<ConfigProvider
  theme={{
    token: {
      colorPrimary: 'var(--color-primary)',
      colorBgContainer: 'var(--color-bg)',
    },
  }}
>
  <App />
</ConfigProvider>

useEffect(() => {
  if (chartInstance) {
    chartInstance.setOption({
      backgroundColor: theme.colors.bg,
      color: theme.colors.palette,
    });
  }
}, [theme, chartInstance]);

[data-theme="dark"] img {
  filter: brightness(0.8) contrast(1.2);
}

.logo {
  mix-blend-mode: difference;
}

// theme/ThemeProvider.tsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import { themes, Theme, ThemeMode } from './themes';

interface ThemeContextValue {
  mode: ThemeMode;
  theme: Theme;
  setMode: (mode: ThemeMode) => void;
  setCustomTheme: (theme: Partial<Theme>) => void;
}

const ThemeContext = createContext<ThemeContextValue | null>(null);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [mode, setMode] = useState<ThemeMode>(() => {
    // 从 localStorage 读取主题
    const saved = localStorage.getItem('theme-mode');
    return (saved as ThemeMode) || 'light';
  });

  const [customTheme, setCustomTheme] = useState<Partial<Theme>>({});

  // 合并主题
  const theme: Theme = {
    ...themes[mode],
    ...customTheme,
  };

  // 应用主题到 CSS 变量
  useEffect(() => {
    const root = document.documentElement;

    // 设置主题模式
    root.setAttribute('data-theme', mode);

    // 设置 CSS 变量
    Object.entries(theme.colors).forEach(([key, value]) => {
      root.style.setProperty(
        `--color-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`,
        value
      );
    });

    Object.entries(theme.spacing).forEach(([key, value]) => {
      root.style.setProperty(`--spacing-${key}`, value);
    });

    Object.entries(theme.typography).forEach(([key, value]) => {
      if (typeof value === 'object') {
        Object.entries(value).forEach(([subKey, subValue]) => {
          root.style.setProperty(`--${key}-${subKey}`, subValue);
        });
      } else {
        root.style.setProperty(`--${key}`, value);
      }
    });

    Object.entries(theme.borderRadius).forEach(([key, value]) => {
      root.style.setProperty(`--border-radius-${key}`, value);
    });

    // 保存到 localStorage
    localStorage.setItem('theme-mode', mode);
  }, [mode, theme]);

  const handleSetMode = (newMode: ThemeMode) => {
    setMode(newMode);
  };

  const handleSetCustomTheme = (partial: Partial<Theme>) => {
    setCustomTheme(prev => ({
      ...prev,
      ...partial,
    }));
  };

  return (
    <ThemeContext.Provider
      value={{
        mode,
        theme,
        setMode: handleSetMode,
        setCustomTheme: handleSetCustomTheme,
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

// theme/themes.ts
export type ThemeMode = 'light' | 'dark' | 'highContrast';

export interface Theme {
  colors: {
    primary: string;
    primaryHover: string;
    secondary: string;
    success: string;
    warning: string;
    error: string;
    text: string;
    textSecondary: string;
    border: string;
    bg: string;
    bgSecondary: string;
    bgHover: string;
  };
  spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  typography: {
    fontFamily: string;
    fontSize: {
      xs: string;
      sm: string;
      md: string;
      lg: string;
      xl: string;
    };
  };
  borderRadius: {
    sm: string;
    md: string;
    lg: string;
  };
}

export const themes: Record<ThemeMode, Theme> = {
  light: {
    colors: {
      primary: '#1890ff',
      primaryHover: '#40a9ff',
      secondary: '#f0f0f0',
      success: '#52c41a',
      warning: '#faad14',
      error: '#f5222d',
      text: '#262626',
      textSecondary: '#8c8c8c',
      border: '#d9d9d9',
      bg: '#ffffff',
      bgSecondary: '#fafafa',
      bgHover: '#f5f5f5',
    },
    spacing: {
      xs: '4px',
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '32px',
    },
    typography: {
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
      fontSize: {
        xs: '12px',
        sm: '14px',
        md: '16px',
        lg: '18px',
        xl: '20px',
      },
    },
    borderRadius: {
      sm: '2px',
      md: '4px',
      lg: '8px',
    },
  },

  dark: {
    colors: {
      primary: '#177ddc',
      primaryHover: '#095cb5',
      secondary: '#262626',
      success: '#49aa19',
      warning: '#d89614',
      error: '#d32029',
      text: '#e8e8e8',
      textSecondary: '#a6a6a6',
      border: '#434343',
      bg: '#141414',
      bgSecondary: '#1f1f1f',
      bgHover: '#262626',
    },
    spacing: {
      xs: '4px',
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '32px',
    },
    typography: {
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
      fontSize: {
        xs: '12px',
        sm: '14px',
        md: '16px',
        lg: '18px',
        xl: '20px',
      },
    },
    borderRadius: {
      sm: '2px',
      md: '4px',
      lg: '8px',
    },
  },

  highContrast: {
    colors: {
      primary: '#0000ff',
      primaryHover: '#0000cc',
      secondary: '#d9d9d9',
      success: '#008000',
      warning: '#ff8c00',
      error: '#ff0000',
      text: '#000000',
      textSecondary: '#666666',
      border: '#000000',
      bg: '#ffffff',
      bgSecondary: '#f0f0f0',
      bgHover: '#e0e0e0',
    },
    spacing: {
      xs: '4px',
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '32px',
    },
    typography: {
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
      fontSize: {
        xs: '13px', // 稍大一点,提高可读性
        sm: '15px',
        md: '17px',
        lg: '19px',
        xl: '21px',
      },
    },
    borderRadius: {
      sm: '0px', // 高对比模式用直角
      md: '0px',
      lg: '0px',
    },
  },
};

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>App</title>

  <!-- 主题初始化脚本 -->
  <script>
    (function() {
      // 读取保存的主题
      const savedTheme = localStorage.getItem('theme-mode') || 'light';

      // 立即设置主题属性
      document.documentElement.setAttribute('data-theme', savedTheme);

      // 如果是暗黑模式,设置背景色避免白屏
      if (savedTheme === 'dark') {
        document.documentElement.style.backgroundColor = '#141414';
      }
    })();
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>