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

Question

我有公共和受保护的路由，它们按以下逻辑实现

   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;
    }
  }

问题是，当我刷新路线 /staff?page=1 上的页面时，应用程序从头开始初始化，并且我被重定向到 /clients 路线。对于这种情况，有什么办法可以处理吗？即，当我刷新私有路线时，我应该留在同一页面上。也许我应该将当前路线保存到本地存储？

Answer 1

刷新后必须使用redux-persist库将变量的值保留isAuthenticated在 localStorage 中。

像这样的东西：

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

import userReducer from './userReducer';

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

const persistedReducer = persistReducer(persistConfig, userReducer);