面试题：Qwik路由路径设计之复杂场景优化

Question

对于一个大型Qwik应用，存在多种语言版本（如中文、英文、日文），并且应用中有嵌套多层的模块结构，例如多级菜单下的不同功能页面。同时，要考虑部分页面只能特定用户角色（如管理员）访问。请阐述如何综合设计路由路径，实现多语言支持、模块嵌套以及权限控制，使其遵循Qwik路由路径设计最佳实践，并给出核心设计思路和关键代码片段。

Answer 1

核心设计思路

1. 多语言支持：通过在路由路径中添加语言前缀，如 /en/、/zh/、/ja/ 等，Qwik 可以根据用户选择的语言或浏览器语言设置，动态调整路由前缀。
2. 模块嵌套：使用嵌套路由的方式，将不同功能模块按照层级关系组织。例如，多级菜单下的功能页面可以表示为 /parent - module/child - module/function - page。
3. 权限控制：在路由守卫中检查用户角色，判断是否有权限访问特定页面。如果用户角色不匹配，重定向到无权限提示页面或登录页面。

关键代码片段

1. 多语言路由前缀：
   • 在 entry.tsx 或路由配置文件中，可以通过中间件或自定义逻辑来处理语言前缀。

   import { component$, useRoute } from '@builder.io/qwik';
   import { useMemo } from '@builder.io/qwik';
   
   const LanguageSwitcher = component$(() => {
     const route = useRoute();
     const lang = useMemo(() => {
       const segments = route.pathname.split('/');
       return segments[1] || 'en';
     }, [route.pathname]);
   
     // 切换语言逻辑，这里假设切换语言会更新路由前缀
     const switchLanguage = (newLang: string) => {
       route.navigate(`/${newLang}${route.pathname.split('/').slice(2).join('/')}`);
     };
   
     return (
       <div>
         <button onClick={() => switchLanguage('en')}>English</button>
         <button onClick={() => switchLanguage('zh')}>中文</button>
         <button onClick={() => switchLanguage('ja')}>日本語</button>
       </div>
     );
   });
   
   export default LanguageSwitcher;
   

2. 嵌套路由：
   • 在 Qwik 中，可以使用 qwikCity 配置嵌套路由。例如，假设存在一个 admin 模块下的 users 子模块。
   • 创建 routes/admin/users.tsx 文件，这将自动成为嵌套路由。

   import { component$ } from '@builder.io/qwik';
   
   const AdminUsersPage = component$(() => {
     return (
       <div>
         <h1>Admin - Users Page</h1>
       </div>
     );
   });
   
   export default AdminUsersPage;
   

3. 权限控制：
   • 创建一个路由守卫函数，例如在 utils/route - guard.ts 中。

   import { useUser } from './user - context';
   import { redirect } from '@builder.io/qwik';
   
   export const requireAdmin = () => {
     const user = useUser();
     if (!user || user.role!== 'admin') {
       throw redirect('/no - permission');
     }
   };
   

   • 在需要权限控制的路由组件中使用该守卫。例如，在 routes/admin/users.tsx 中：

   import { component$ } from '@builder.io/qwik';
   import { requireAdmin } from '../utils/route - guard';
   
   const AdminUsersPage = component$(() => {
     requireAdmin();
     return (
       <div>
         <h1>Admin - Users Page</h1>
       </div>
     );
   });
   
   export default AdminUsersPage;
   

   • 同时，需要在 entry.tsx 中配置无权限页面。

   import { component$, render } from '@builder.io/qwik';
   import { qwikCity } from '@builder.io/qwik - city';
   
   const NoPermissionPage = component$(() => {
     return (
       <div>
         <h1>No Permission</h1>
       </div>
     );
   });
   
   qwikCity({
     routes: [
       { path: '/no - permission', component: NoPermissionPage }
     ]
   });
   
   render(document, <NoPermissionPage />);