正确登录后如何重定向用户？

Posted 2023-02-22

【中文标题】正确登录后如何重定向用户？

【英文标题】：How can I redirect user after they login properly?

【发布时间】：2021-12-31 05:25:38

【问题描述】：

我正在构建一个使用 react 和 firebase 的应用程序。我创建了一个登录组件，它在他们登录后将状态“isLoggedIn”设置为 true，并将用户重定向到主页。问题是状态默认为false然后设置需要时间，所以当你刷新主页面时，你可以简单的看到登录页面。我是否要更改我的路由器重定向代码或设置不同的状态？

这是我的代码：

 const [isLoggedIn, setIsLoggedIn] = useState(false)

 onAuthStateChanged(auth,  (currentUser) => 
    setIsLoggedIn(currentUser)
)

return (
    <Router>
        isLoggedIn ? <Redirect to="/home" /> : <Redirect to="/login" />
        <Route path="/home" component=SongList />
        <Route path="/login" component=Auth />
    </Router>
)

【参考方案1】：

在react-router-dom v5 中，常见的模式是创建一个处理身份验证状态的自定义路由组件，即使它处于挂起状态。创建一个从不确定状态开始的AuthRoute 组件，并且在您获得身份验证确认之前不渲染路由的组件或重定向。

例子：

const AuthRoute = props => 
  const location = useLocation();

  const [isLoggedIn, setIsLoggedIn] = useState(); // <-- neither true nor false

  useEffect(() => 
    const unsubscribe = onAuthStateChanged(auth,  (currentUser) => 
      setIsLoggedIn(currentUser); // sets user object or null
    );

    return unsubscribe; // <-- cleanup auth subscription!
  , []);

  if (isLoggedIn === undefined) return null; // <-- or loading indicator, etc...
  
  return isLoggedIn ? (
    <Route ...props />
  ) : (
    <Redirect
      to=
        pathname: "/login",
        state:  location , // <-- pass current location
      
    />
  );
;

用法：

<Router>
  <Switch> // <-- match & render a single route
    <AuthRoute path="/home" component=SongList />
    <Route path="/login" component=Auth />
  </Switch>
</Router>

在Auth 组件中，从路由状态访问传递的location，成功登录后，您可以将用户重定向回他们最初尝试访问的路由。

const  state  = useLocation();
const history = useHistory();

...

// successful login, redirect back to route, or home if undefined
history.replace(state.location?.pathname ?? "/home")

让PrivateRoute 的每个“实例”保持其自己的状态，尽管您将进行大量的身份验证检查。从这里你可能想要实现一个AuthProvider React 上下文组件，它存储isLoggedIn 状态并且每个PrivateRoute 组件订阅上下文值。这样，用户登录后应用程序可以保持此状态，而无需在每次访问受保护的路由时重新检查/获取它。

【讨论】：

您好，感谢 Drew 先生的回复。我尝试使用您的代码，我制作了 AuthRoute 组件，但是重定向不起作用。我对我们传递给 AuthRouter 的道具感到困惑，我们传递路径和组件然后传播它，我不熟悉这种语法？我不知道 AuthRoute 组件如何与我的 App.js 一起使用来重定向用户。

@KaiTheGuy 是的，传递给AuthRoute 的道具是通常传递给Route 组件的道具，它们确实都通过（扩展语法）传递给渲染的Route 组件。如果用户未通过 firebase auth listener 进行身份验证，isLoggedIn 状态的值是多少？

当我运行 console.log(isLoggedIn) 时，用户未通过身份验证的状态为 null。当我成功登录时，它不会重定向，但如果我手动更改路线（在搜索栏中），那么它可以正常工作。只有当我手动更改路线时，状态才会改变，这是它应该如何工作的？

@KaiTheGuy 哦，我明白了，如果没有经过身份验证的用户，听起来 null 是从 Firebase 返回的有效 currentUser 值。如果是这种情况，那么“不确定”状态需要是其他不是有效身份验证状态的状态。 undefined 那就在这里工作吧。我会更新的。

对于所有问题，我很抱歉，但一切正常，除了用户在成功登录后仍未被重定向。