时间戳

首页 > 解决方案 > 通过在反应中清除历史记录来实现注销？

javascript - 通过在反应中清除历史记录来实现注销？

问题描述

我正在构建一个包括反应路由器的应用程序，我正在尝试在应用程序中注销。我正在使用 history.push('/') 重定向到主页，但是通过单击后退箭头，我再次登录应用程序并重定向到上一个屏幕。有什么办法可以保护这个。

标签： javascriptreactjsreact-router

解决方案

我通常通过定义公共和受保护的路由来解决这个问题。公共路线应该对所有用户可用（登录、注册等）。受保护的路由是只有经过身份验证的用户才能访问的路由。

例如，假设我们将当前用户的身份验证密钥存储在我们的状态中。如果我们有/login公共和/home受保护的路由，以及一个注销按钮，我们可以简单地定义以下逻辑：

const Router = props => {
    const [key, setKey] = useState("Auth Key")
    
    const publicRoutes = [<Route path="/login" component={Login} />]
    const protectedRoutes = [<Route path="/home" component={Home} />]
    return (
        <Switch>
            {key === null ? publicRoutes : protectedRoutes}
            <button onClick={() => setKey(null)>Log out</button>}
        </Switch>
    )
}

这样，您将只允许经过身份验证的用户访问您的受保护路由。不过，您需要找到一种更好的方式来验证您的用户，因为在这种情况下，如果客户端只是将他的状态从更改null为几乎任何其他状态，他将可以完全访问您的受保护路由。您可能需要使用某种JWT身份验证密钥来验证用户身份。

推荐阅读