javascript - Using BrowserRouter, how can I clear history on logout - Stack Overflow

admin管理员组

文章数量:1335357

Right now I am always using history.replace which never pushes anything on the history stack. I am doing this because if I push and then log out, my app allows using the browser back arrow to go back to the previous route and I don't want that. How can I manipulate the history so that when logout is pressed, I a have nothing on the history stack to go back to.

Right now I am always using history.replace which never pushes anything on the history stack. I am doing this because if I push and then log out, my app allows using the browser back arrow to go back to the previous route and I don't want that. How can I manipulate the history so that when logout is pressed, I a have nothing on the history stack to go back to.

• javascript
• reactjs
• react-router-v4

Share Improve this question Follow edited Nov 1, 2019 at 2:29 Vincent D'amour 3,90311 gold badge2929 silver badges4040 bronze badges asked Oct 15, 2017 at 20:39 Tzvetlin VelevTzvetlin Velev 2,02522 gold badges2020 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can't do that with react-router because you should not do that. If the user logout and go back to a page where he/she should not see, a good habit is to display an 403 error page instead. You could show a message saying that the user doesn't have the permission to access the page. This is what most website are doing because it's bad UX to remove browser history.

You can find some 403 page example here.

If for a reason you really want to clear history, you can continue to use .replace but if the user is still logged in and want to go back, he/she won't be able. You can also open a new tab with your site URL and close the current one, but I don't remend doing that.

THIS WORKED FOR ME !! (Just a small hack)

1. Inside your navbar ponent or where you have your logout button, create the following function.

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

Here I am using the variable to check if a user is logged in. And use Redirect from react-router-dom to push the login path and pass the variable inside the state.

2. Then call the function inside your render ponent.

   {performRedirect()}

This will keep you on the login page even if you click the back button from the browser. Because your ponent continuously renders "/login" because the is_logged_in variable is 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>
   )
}

3. ALSO, do the same inside the login page while navigating after a successful login. Because once logged in you should not go back to the login page. Once you get a true response for the login request, do the following.

This will redirect the login page back to "/home" even if you click the back button because inside the Login.js ponent you are redirecting it to the "/home" if it is logged in. you will be able to see the login page only if the user is logged out.

//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>
   )
}

本文标签： javascriptUsing BrowserRouterhow can I clear history on logoutStack Overflow