如何根据登录用户类型切换浏览器路由？

问题场景 #

使用Meteor.js + React开发Web应用，分「user」和「employer」两类用户，对应<UserRouter>、<EmployerRouter>专属路由，未登录时用<UnprotectedRouter>。期望根据登录用户的type字段自动切换路由，但登录/注册后路由无法更新——启动时显示未登录路由，注册新用户（自动登录）后仍停留在UnprotectedRouter，未切换到对应类型的路由。尝试过useState无效，以为注册跳转后App.tsx会重新运行也未生效。

现有代码 #

UserRouter.tsx #

export const UserRouter = () => {
  return (
    <Routes>
      <Route path={RoutePaths.USER_HOME} element={<UserHome />} />
      <Route path={RoutePaths.USER_PROFILE} element={<UserProfile />} />
      <Route path={RoutePaths.EMPLOYER_HOME} element={<EmployerHome />} />
      <Route path={RoutePaths.USER_SIGNUP} element={<UserSignUp />} />
      <Route path={RoutePaths.EMPLOYER_SIGNUP} element={<EmployerSignUp />} />
      <Route path={RoutePaths.USER_SIGNIN} element={<UserSignIn />} />
      <Route path="/position/:postingId" element={<UserPosting />}/>
    </Routes>
  );
};

EmployerRouter.tsx #

export const EmployerRouter = () => {
    return (
      <Routes>
        <Route path={RoutePaths.USER_HOME} element={<EmployerDashboard />} />
      </Routes>
    );
  };

UnprotectedRouter.tsx #

export const UnprotectedRouter = () => {
  return (
    <Routes>
      <Route path={RoutePaths.WELCOME_PAGE} element={<WelcomePage />} />
      <Route path={RoutePaths.USER_SIGNUP} element={<UserSignUp />} />
      <Route path={RoutePaths.EMPLOYER_SIGNUP} element={<EmployerSignUp />} />
    </Routes>
  );
};

App.tsx #

const selectRouter = (userType: String) => {
  switch (userType) {
    case "user":
      return <UserRouter />
    case "employer":
      return <EmployerRouter />
    default:
      return <UnprotectedRouter />
  }
}

const RouterChoice = () => {
  const isLoadingProfiles = useSubscribe("allUserProfiles");
  const loggedInUsername = Meteor.user()?.username;
  const userType = UserCollection.findOne({ username: loggedInUsername })?.type;

  return selectRouter(userType)
}

export const App = () => {
  const router = RouterChoice();

  return (
    <BrowserRouter>
      <div>
        {router}
      </div>
    </BrowserRouter>
  )
};

注册方法 #

const handleSignUp = (e: { preventDefault: () => void }) => {
  e.preventDefault();
  console.log("password is: " + password);
  console.log("username is: " + username);
  console.log("email is: " + email);
  Accounts.createUser(
    {
      username: username,
      password: password,
      email: email,
    },
    (error) => {
      if (error) {
        console.log(error);
        return;
      } else {
        console.log("success!");
      }
    }
  );

  Meteor.call("user-profile.createNewProfile", {
    username: username,
    name: name,
    type: "user",
  });

  setName("");
  setUsername("");
  setEmail("");
  setPassword("");
  console.log("submitted!");
  navigate(RoutePaths.USER_HOME);
};

问题根源 #

1. 无响应式数据追踪：Meteor.user()和UserCollection.findOne的变化不会触发RouterChoice重渲染，因为没有用React状态或Meteor官方的useTracker hook监听数据变化。
2. 异步时序错误：Accounts.createUser是异步操作，未等其完成就调用创建用户档案的方法，可能导致档案创建时用户状态未同步到客户端。
3. 路由上下文错误：RouterChoice在BrowserRouter外部，路由组件无法获取正确的路由上下文，导致跳转和渲染异常。

修复方案 #

1. 用useTracker实现响应式数据监听 #

替换原RouterChoice组件，用useTracker追踪用户和用户档案的变化，确保数据更新时组件自动重渲染。同时调整BrowserRouter的包裹范围，把RouterChoice放到内部。

修复后的App.tsx：

import { useTracker } from 'meteor/react-meteor-data';

const selectRouter = (userType?: string) => {
  switch (userType) {
    case "user":
      return <UserRouter />
    case "employer":
      return <EmployerRouter />
    default:
      return <UnprotectedRouter />
  }
}

const RouterChoice = () => {
  const { userType, isLoading } = useTracker(() => {
    const user = Meteor.user();
    const profileSub = Meteor.subscribe("allUserProfiles");
    const userProfile = user?.username ? UserCollection.findOne({ username: user.username }) : null;
    
    return {
      userType: userProfile?.type,
      isLoading: !profileSub.ready()
    };
  }, []);

  // 加载状态处理，避免页面闪烁
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return selectRouter(userType);
}

export const App = () => {
  return (
    <BrowserRouter>
      <RouterChoice />
    </BrowserRouter>
  )
};

2. 修正注册流程的异步时序 #

确保Accounts.createUser成功后再创建用户档案，档案创建完成后再执行跳转和表单重置。

修复后的注册方法：

const handleSignUp = (e: { preventDefault: () => void }) => {
  e.preventDefault();
  console.log("password is: " + password);
  console.log("username is: " + username);
  console.log("email is: " + email);
  
  Accounts.createUser(
    {
      username: username,
      password: password,
      email: email,
    },
    (error) => {
      if (error) {
        console.log(error);
        return;
      } 
      // 用户创建成功后，再创建档案
      Meteor.call("user-profile.createNewProfile", {
        username: username,
        name: name,
        type: "user",
      }, (profileError) => {
        if (profileError) {
          console.log(profileError);
          return;
        }
        // 档案创建成功后，再跳转并重置表单
        navigate(RoutePaths.USER_HOME);
        setName("");
        setUsername("");
        setEmail("");
        setPassword("");
        console.log("submitted!");
      });
    }
  );
};

3. 额外优化建议 #

• 路由权限控制：给UserRouter和EmployerRouter添加权限校验，比如在路由的element中判断用户类型，不符合则跳转到对应页面。
• 清理冗余路由：UserRouter中包含的USER_SIGNUP、EMPLOYER_SIGNUP等未登录路由，应该只保留在UnprotectedRouter中，避免路由冲突和逻辑混淆。

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