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

【问题标题】：implementing Logout by clearing history in react?通过在反应中清除历史记录来实现注销？
【发布时间】：2021-10-07 11:37:14
【问题描述】：

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

【问题讨论】：

您如何验证用户身份？
我从 API 获取凭据并生成 accessToken 并用于在登录后访问数据@DimitarVeljanovski
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： javascript reactjs react-router

【解决方案1】：

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

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

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 身份验证密钥来验证用户身份。

【讨论】：