javascript - 刷新页面后如何留在 protected 路线上。 react 路由器 5.2.0

Question

我有公共(public)和 protected 路线，它们在以下逻辑中实现

   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 路由。有什么办法可以处理这种情况吗？即当我刷新私有(private)路线时，我应该留在同一页面上。也许我应该将当前路由保存到 localStorage？

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