Subdomain Routing in React and React Router
我有 3 种类型的用户，我们希望为项目维护相同的代码库，而不是拥有 3-4 个代码库，因为大多数观点只是对用户类型的主观判断。
Admin > admin.example.com
Moderator > moderator.example.com
Brands > brands.example.com
我的 React 应用程序结构
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
src
–BaseRoutes.js <— Should handle by subdomain logic – modules — admin —- AdminRoutes.js <—- handles all Admin route logic —- components —- pages — moderator —- ModeratorRoutes.js <—- handles all Moderator route logic —- components —- pages — brands —- BrandsRoutes.js <—- handles all Brands route logic —- components —- pages – components – pages |
每种类型的用户都有自己的身份验证以允许访问内部路由。我找到了一个分割域并使用以下方法进行路由的函数：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 |
let host = window.location.host;
let protocol = window.location.protocol; let parts = host.split(“.”); let subdomain =“”; // If we get more than 3 parts, then we have a subdomain // INFO: This could be 4, if you have a co.uk TLD or something like that. if (parts.length >= 3) { subdomain = parts[0]; // Remove the subdomain from the parts list parts.splice(0, 1); // Set the location to the new url window.location = protocol +“//” + parts.join(“.”) +“/” + subdomain; } |
这是在 React 中处理基于子域的路由的正确方法吗？我从来没有为多种用户类型使用过一个代码库。对正确的实现感到困惑。
- 你用的是什么路由器？。你应该看看 React Router，reacttraining.com/react-router
- @Joshua Am 使用相同的。但是没有找到任何关于子域的帮助。
- 这听起来像是不是由 client/react-router 处理的，而是由您的 SPA 所在的服务器处理的。假设所有三个子域都服务于相同的 React 代码库，我建议您从上面发布的代码中找出子域是什么，并有条件地渲染不同的组件，即如果它的 admin 仅显示渲染 admin-具体路线/链接/导航等…
- @goto1 你是对的。有什么建议？
- @HarshaMV 我已经实现了一次你想要实现的目标，但我无法再访问代码库来给你一些例子。创建一个全局路由器，即 BaseRouter，然后管理员、主持人等应该拥有自己的路由器。更像是带有子路由器的路由器。然后，您可以将身份验证添加到每个路由。
- @Joshua 稳定吗？你遇到过这种路由的问题吗？有什么我应该注意的吗？
- @HashaMV 不，我没有遇到任何问题。我不确定还有其他方法可以处理它。但是仍然可能存在最佳解决方案。我之前的回答解决了你的问题吗？
您应该检查当前 url 的子域并将其与特定的用户角色匹配，然后在反应路由器中您可以使用该简单逻辑，以便仅呈现特定于角色的路由：
|
1
2 3 4 5 6 7 8 9 10 |
<Router history={history}>
{isAdmin && <Route component={AdminViews} /> } {isModerator && <Route component={ModeratorViews} /> } … <Route path=“/tnc” exact={true} component={CommmonRouteForAllRoles} /> </Router> |
例如在哪里AdminViews 可能如下所示：
|
1
2 3 4 5 6 7 8 9 |
export const AdminViews = () => {
return ( <Switch> <Route path=“/” exact={true} component={AdminHome} /> <Route path=“/other” exact={true} component={AdminOtherRoute} /> <Route path=“/sign-in” exact={true} component={AdminSignIn} /> </Switch> ); }; |
- 如何让用户登录？由于所有三个登录名都不同？
- 您可以为每个角色添加 /sign-in 路由，每个角色都指向不同的登录组件。然后 admin.example.com/sign-in 将指向与 moderator.example.com/sign-in 不同的组件。这样，您仍然可以透明地使用用户角色的相同逻辑。例如。如果未通过身份验证，只需推送到 /sign-in
我猜你的服务器应该可以实现这一点，例如，你可以为管理员和版主创建子域，而用户域将是基本路由，所以如果管理员要登录，他会转到 admin.yourapp.com，版主会转到到 moderator.yourapp.com 然后处理 auth 逻辑，如果你使用 react-router then
视图不会真的有问题
来源：https://www.codenong.com/61884567/
