成功登录后推送（重定向）到路由

Posted 2023-02-18

【中文标题】成功登录后推送（重定向）到路由

【英文标题】：push (redirect) to a route after successful login

【发布时间】：2022-01-18 00:55:09

【问题描述】：

到目前为止，我一直从 React 组件重定向到用户仪表板，但我想应用不同的方法，我想在从 saga 本身获得成功响应后重定向。

为此，我尝试使用redux-first-history（它带有 react-router6 的支持）我遵循了他们的文档，几乎一切正常，但一个动作 @@router/CALL_HISTORY_METHOD 被调用了两次。

这是我的路线

export default function App() 
  return (
    <AuthProvider>
      <Router history=history>
        <Routes>
          <Route element=<Layout />>
            <Route path="/" element=<PublicPage /> />
            <Route path="/login" element=<LoginPage /> />
            <Route
              path="/protected"
              element=
                <RequireAuth>
                  <ProtectedPage />
                </RequireAuth>
              
            />
          </Route>
        </Routes>
      </Router>
    </AuthProvider>
  );

贯穿整个项目，下面是我的店铺。

import  applyMiddleware, compose, createStore  from "redux";
import  persistReducer, persistStore  from "redux-persist";
import storage from "redux-persist/lib/storage";
import createSagaMiddleware from "redux-saga";
import rootReducer from "../store/reducers";
import  watchAuth  from "../store/sagas/index";
import  createReduxHistoryContext  from "redux-first-history";
import  createBrowserHistory  from "history";

const composeEnhancers =
  process.env.NODE_ENV === "development"
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : null || compose;

const  createReduxHistory, routerMiddleware  = createReduxHistoryContext(
  history: createBrowserHistory(),
  oldLocationChangePayload: true,
  showHistoryAction: true,
);
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware, routerMiddleware];
const persistConfig = 
  key: "root",
  storage,
  whitelist: ["auth"],
;

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(...middleware)),
);
const persistor = persistStore(store);
sagaMiddleware.run(watchAuth);

export const history = createReduxHistory(store);
export default store;
export  persistor ;

和我的传奇

import  call, delay, put  from "redux-saga/effects";
import axios from "../../../config/axios";
import 
  authFail,
  authStart,
  authSuccess,
  checkAuthTimeout,
  logout,
  logoutSucceed,
  setAlert,
 from "../../actions/auth/auth";
import  LOGIN_API  from "../../apiCollecitions";
import  push  from "redux-first-history";

export function* authLoginSaga(action) 
  yield put(authStart());

  const authData = 
    email: action.email,
    password: action.password,
  ;
  try 
    const response = yield axios.post(
      `$LOGIN_API?lng=$localStorage.getItem("i18nextLng")&active=true`,
      authData,
    );
    yield localStorage.setItem("token", response.data.token);
    yield localStorage.setItem("expirationDate", expirationDate);
    yield put(authSuccess(response.data.token));
    yield put(push("/protected")); //should redirect to the specified route
   catch (error) 
    yield put(authFail(error.response.data.message));
  

我还设置了一个示例GitHub repo，供您参考。

【参考方案1】：

如果你不想让事情复杂化，你可以简单地做window.location="/login"，或者你可以从 react-router 添加一个 use Redirect 并从你的返回函数中返回这一行

if(this.state.authSuccess)<Redirect to="/login" />

【讨论】：

我曾经这样做，但我想通过我的传奇重定向