刷新页面后如何留在受保护的路线上。 反应路由器 5.2.0

Question

I have public and protected routes, which implemented in the following logic

   useEffect(() => {
      checkIfAuthenticated(); //This function checks if the token is in localStorage
     // Initial state isAuthenticated = false
    }, []);
   const newHistory = useHistory()

   <Router history={newHistory}>
    {isAuthenticated ? (
      <Layout>
        <Switch>
          <Route
             exact
             path="/clients"
             component={Clients}
            />
          <Route
             exact
             path="/staff"
             component={Staff}
            />
          <Redirect to="/clients" />
        </Switch>
      </Layout>
       ) : (
      <>
       <Route path="/login" component={Login} />
       <Redirect to="/login" />
      </>)}
    </Router>

//store
checkIfAuthenticated() {
    const accessToken = localStorage.getItem("access_token");
    const refreshToken = localStorage.getItem("refresh_token");
    if (accessToken && refreshToken) {
      this.isAuthenticated = true;
    }
  }

The problem is when I refresh the page on the route /staff?page=1, the app initializes from scratch and I am redirected to the /clients route. Is there any way to handle this case? Ie when I refresh the private route, I should stay on the same page. Maybe I should save the current route to the localStorage?

Answer 1

You must use redux-persist library to keep the value of isAuthenticated variable in localStorage after refresh.

Something like this:

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import userReducer from './userReducer';

const persistConfig = {
  key: 'user',
  storage,
  whitelist: ['isAuthenticated'],
};

const persistedReducer = persistReducer(persistConfig, userReducer);

Answer 2

If you are sure about persistance of variables in localStorage check this as well:

const accessToken = localStorage.getItem("access_token");
const refreshToken = localStorage.getItem("refresh_token"); 
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
  if (accessToken && refreshToken) {
    setIsAuthenticated(true);
  }
}, [accessToken , refreshToken ]);

const newHistory = useHistory()

<Router history={newHistory}>
{isAuthenticated ? (
  <Layout>
    <Switch>
      <Route
         exact
         path="/clients"
         component={Clients}
        />
      <Route
         exact
         path="/staff"
         component={Staff}
        />
      <Redirect to="/clients" />
    </Switch>
  </Layout>
   ) : (
  <>
   <Route path="/login" component={Login} />
   <Redirect to="/login" />
  </>)}
</Router>