登錄后如何將用戶重定向到用戶特定的主頁？用戶特定的url應該包含用戶的_id

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
  }

  render() {
    return (
      <React.Fragment>
        <AppNavbar />
        <div className="App">
          <Switch>
            <Route path="/not-found" component={NotFound} />
            <AuthRoute path="/profile/settings" type="private">
              <Profile />
            </AuthRoute>
            <AuthRoute path="/setup/school" type="private">
              <SchoolDetails />
            </AuthRoute>
            <AuthRoute path="/setup/team" type="private">
              <TeamManagement />
            </AuthRoute>
            <AuthRoute path="/create/teams" type="private">
              <TeamSetup />
            </AuthRoute>
            <AuthRoute path="/register/setup" type="guest">
              <ProfileSetup />
            </AuthRoute>
            <AuthRoute path="/events" type="private">
              <SimpleSlider />
            </AuthRoute>
            <AuthRoute path="/register" type="guest">
              <RegisterModal />
            </AuthRoute>
            <AuthRoute path="/login" type="guest">
              <LoginModal />
            </AuthRoute>

            <AuthRoute exact path="/" type="private">
              <SimpleSlider />
            </AuthRoute>

            <Redirect to="/not-found" />
          </Switch>
        </div>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
  user: state.auth.user,
});

export default connect(mapStateToProps)(App);

const AuthRoute = (props) => {
  const { isAuthenticated, user, type } = props;

  if (type == "guest" && isAuthenticated) {
    //history.replace(`${lo}/${user._id}`);
    return <Redirect to={`/events/${user._id}`} />;
  } else if (type == "private" && !isAuthenticated)
    return <Redirect to={`/login`} />;
  return <Route {...props} />;
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
  userloaded: state.auth.userloaded,
  user: state.auth.user,
});

export default connect(mapStateToProps)(AuthRoute);

const initialState = {
  token: localStorage.getItem("token"),
  isAuthenticated: null,
  userloaded: false,
  isLoading: false,
  user: null,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case USER_LOADING:
      return {
        ...state,
        isLoading: true,
      };
    case USER_LOADED:
      return {
        ...state,
        user: action.payload,
        userloaded: true,
        isAuthenticated: true,
        isLoading: false,
      };
    case LOGIN_SUCCESS:
    case REGISTER_SUCCESS:
      localStorage.setItem("token", action.payload.token);
      return {
        ...state,
        userloaded: true,
        isAuthenticated: true,
        isLoading: false,
        ...action.payload,
      };
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case REGISTER_FAIL:
      localStorage.removeItem("token");
      return {
        ...state,
        token: null,
        user: null,
        userloaded: false,
        isAuthenticated: false,
        isLoading: false,
      };
    default:
      return state;
  }
}

export const loadUser = () => (dispatch, getState) => {
  // User loading
  dispatch({ type: USER_LOADING });

  axios
    .get("/api/auth/user", tokenConfig(getState))
    .then((res) =>
      dispatch({
        type: USER_LOADED,
        payload: res.data,
      })
    )
    .catch((err) => {
      dispatch(returnErrors(err.response.data, err.response.status));
      dispatch({ type: AUTH_ERROR });
    });
};

// Register User
export const register =
  ({ name, email, password }) =>
  (dispatch) => {
    // Headers
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };

    //Request body
    const body = JSON.stringify({ name, email, password });

    axios
      .post("/api/users", body, config)
      .then((res) =>
        dispatch({
          type: REGISTER_SUCCESS,
          payload: res.data,
        })
      )
      .catch((err) => {
        dispatch(
          returnErrors(err.response.data, err.response.status, "REGISTER_FAIL")
        );
        dispatch({
          type: REGISTER_FAIL,
        });
      });
  };

// Login User
export const login =
  ({ email, password }) =>
  (dispatch) => {
    // Headers
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };

    //Request body
    const body = JSON.stringify({ email, password });

    axios
      .post("/api/auth", body, config)
      .then((res) =>
        dispatch({
          type: LOGIN_SUCCESS,
          payload: res.data,
        })
      )
      .catch((err) => {
        dispatch(
          returnErrors(err.response.data, err.response.status, "LOGIN_FAIL")
        );
        dispatch({
          type: LOGIN_FAIL,
        });
      });
  };

// Logout User
export const logout = () => {
  return {
    type: LOGOUT_SUCCESS,
  };
};

// Setup config/headers and token
export const tokenConfig = (getState) => {
  // Get token from localstorage
  const token = getState().auth.token;

  // Headers
  const config = {
    headers: {
      "Content-type": "application/json",
    },
  };

  // If token, add to headers
  if (token) {
    config.headers["x-auth-token"] = token;
  }

  return config;
};

我的問題是，每當用戶登錄到我的應用程式時，他都會被重定向到主頁，但我來自 redux 商店的“_id”是未定義的。首先，在重繪 頁面后，他會被重定向到包含正確用戶 ID 的 URL。例如，登錄后 => 用戶在另一次手動重繪 后被重定向到“/events/undefined” => URL 更改為“/events/62a6503c9e8a60254ed94ff1”

旁注：每當應用程式重繪 時，登錄站點就會出現一瞬間。這是另一種無意的行為。

uj5u.com熱心網友回復：

只是為了測驗，您是否應該在重定向時嘗試檢查用戶物件？像這樣：

const AuthRoute = (props) => {
  const { isAuthenticated, user, type } = props;

  if (type == "guest" && isAuthenticated && user._id) {
    //history.replace(`${lo}/${user._id}`);
    return <Redirect to={`/events/${user._id}`} />;
  } else if (type == "private" && !isAuthenticated)
    return <Redirect to={`/login`} />;
  return <Route {...props} />;
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
  userloaded: state.auth.userloaded,
  user: state.auth.user,
});

標籤：反应 验证 重定向 还原 路线

上一篇：Apache.htacess-301重定向根本不起作用。使用動態和友好的URL

下一篇：在WordPress中使用Session重定向時出現問題