面试题：Qwik中如何实现基本的路由守卫

Question

在Qwik应用里，假设你有一个需要用户登录后才能访问的页面，描述一下实现此页面路由守卫的基本步骤及涉及到的关键代码逻辑。

Answer 1

基本步骤

1. 引入相关模块：在Qwik应用中，需要引入处理路由和状态管理相关的模块。
2. 创建路由守卫逻辑：在路由配置或者页面加载逻辑中添加判断用户登录状态的逻辑。
3. 处理未登录情况：如果用户未登录，将用户重定向到登录页面或者显示提示信息。

关键代码逻辑

1. 引入模块

import { component$, useLocation, useNavigate } from '@builder.io/qwik';
import { useUserStore } from '../stores/userStore'; // 假设用户状态存储在这个store

2. 创建路由守卫逻辑

export const MyProtectedPage = component$(() => {
  const navigate = useNavigate();
  const location = useLocation();
  const { isLoggedIn } = useUserStore();

  if (!isLoggedIn) {
    // 处理未登录情况
    navigate('/login', { state: { from: location } });
    return null;
  }

  return (
    <div>
      <h1>Protected Page</h1>
      <p>Content for logged in users only.</p>
    </div>
  );
});

在上述代码中：

• 通过useUserStore获取用户登录状态isLoggedIn。
• 如果isLoggedIn为false，使用useNavigate将用户重定向到/login页面，并通过state传递当前位置信息，以便登录后可以返回原页面。
• 如果用户已登录，则正常渲染页面内容。