React Route-点击检查用户是否已登录，如果未登录，请发送他登录，然后返回页面

Question

我现在拥有的：

1. 用户通过玩家列表查看排行榜
2. 用户点击排行榜内的玩家卡
3. 我检查用户是否已登录，如果用户未登录，我会发送给他转到"登录"页面

我想要什么。

1. 用户通过玩家列表查看排行榜
2. 用户点击排行榜内的玩家卡
3. 我检查用户是否已登录，如果用户未登录，我会发送给他到登录页面，在他登录后，我会将他发送回他之前点击的玩家档案

我真的不知道该如何以及在哪里查找。

Answer 1

我不确定你是否在使用任何路由器，因为你没有指定。但你需要的是所谓的"；"防护路线"；或"；路由保护"；。

警卫是一个"；"检查"；或"；条件"；这将允许用户访问或不访问指定的路线。

让我给你举一个React Router的例子。https://codepen.io/najt/pen/jOBjOMW

简而言之，你可以做这样的事情：

const GuardedRoute = ({loggedIn, ...props}) => {
if (loggedIn) {
return <Route {...props} />;
}
return <Redirect to="/login" />
}

在正常流程中，如果某人没有登录，你不应该允许他选择配置文件。确保他只有在已经登录的情况下才能访问选择。这更像是用户体验，而不是代码，但我认为值得一提。

但如果你真的需要功能，你可以看看"；"历史"；与React Router Dom相关。它使您能够检索访问的URI的历史记录，并将用户重定向回他试图访问的页面。

另一种可能性是使用url&redirect=/profile/example中的参数将他重定向到Login，并在Login操作中使用此参数。

带有：

• React@17
• React-Router-Dom@5