使用 BrowserRouter，如何在注销时清除历史记录

Question

现在我一直在使用 history.replace，它从不在历史堆栈中推送任何内容。我这样做是因为如果我按下然后注销，我的应用程序允许使用浏览器后退箭头返回到以前的路线，但我不希望那样。我怎样才能操纵历史，以便在按下注销时，我在历史堆栈上没有任何东西可以返回。

Answer 1

你不能用 react-router 那样做，因为你不应该那样做。如果用户注销并返回到 he/she 不应该看到的页面，一个好习惯是显示 403 错误页面。您可以显示一条消息，说明用户没有访问该页面的权限。这是大多数网站正在做的事情，因为删除浏览器历史记录是糟糕的用户体验。

您可以找到一些 403 页面示例 here。

如果出于某种原因你真的想清除历史记录，你可以继续使用 .replace 但如果用户仍然登录并想返回，he/she 将无法.您还可以在您的网站上打开一个新标签页 URL 并关闭当前标签页，但我不建议这样做。

Answer 2

这对我有用！！（只是一个小技巧）

在您的导航栏组件内或您有注销按钮的地方，创建以下函数。

const performRedirect = () => {
  if (!is_logged_in) {
    return <Redirect push state={is_logged_in} to="/login" />;
  }
 };

这里我使用变量来检查用户是否登录。并使用来自 react-router-dom 的重定向来推送登录路径并在状态中传递变量。

然后调用渲染组件中的函数。

{performRedirect()}

即使您从浏览器中单击后退按钮，这也会让您停留在登录页面。因为您的组件不断呈现“/login”，因为 is_logged_in 变量为 false。

//Example: NavBar.js

import { Redirect } from "react-router-dom";

const Navbar = () => {

  //Redirect function
  const performRedirect = () => {
     if (!is_logged_in) {
        return <Redirect push state={!is_logged_in} to="/login" />;
     }
   };

   return (
     <div>
      //your nav links
      <div>
      ...
      <div>

      //call redirect function
      {performRedirect()}
     </div>
   )
}

还，在成功登录后导航时，在登录页面中执行相同操作。因为一旦登录，您不应该返回登录页面。获得登录请求的真实响应后，请执行以下操作。

这会将登录页面重定向回“/home”，即使您单击后退按钮也是如此，因为在 Login.js 组件内，如果它已登录，您会将其重定向到“/home”。你只有在用户注销后才能看到登录页面。

//Example: Login.js

import React from "react";
import { Redirect } from "react-router-dom";

const Login = () => {

  //* Redirect function
  const performRedirect = () => {
    if (is_logged_in) {
      if (user_info && user_info.role === "admin") {
        return <Redirect to="/admin/dashboard" />;
      } else {
        return <Redirect push state={is_logged_in} to="/home" />;
      }
    }
  };

   return (
     <div>
      //your login content
      <div>
      ...
      <div>

      //call redirect function
      {performRedirect()}
     </div>
   )
}

使用 BrowserRouter，如何在注销时清除历史记录

Using BrowserRouter, how can I clear history on logout

javascript

reactjs

react-router-v4