Как перенаправить после успешного входа в систему реагировать js

Question

Я использую создание приложения реагирования. Здесь я не могу понять, как перенаправить на /dashboard после успешного входа в систему. Любая помощь будет полезна

. В этом файле я передаю свое имя пользователя и пароль для моего редукционного действия this.props.login

вход. js

    handleLoginClick = () => {
        const { inputUserID, inputPassword } = this.state;

        this.login(inputUserID, inputPassword)

      };
    login = (username, password) => {
        this.props.login(username, password);

      };



  render() {
    const {
      showError,
      open,
      inputUserID,
      inputPassword,
      checkRememberID,
      showPhoneNumberDialog,
      showVerifyNumberDialog
    } = this.state;


    return (
      <div className="sign-in-dialog-container">

        <Dialog
          id="dialog-sign-in"
          className="dialog"
          open={open}
          onClose={this.handleClose}
          aria-labelledby="form-dialog-title"
          style={{

            backgroundColor: '#fff'
          }}
        >
          <DialogTitle id="form-dialog-title">Sign In</DialogTitle>
          <DialogContent className="dialog-content">
            <div className="dialog-content-form">
              <div className="form-field">
                <div className="content-label">ID</div>
                <FormControl fullWidth variant="outlined">
                  <OutlinedInput
                    fullWidth
                    type="text"
                    placeholder="User Name"
                    value={inputUserID}
                    onChange={this.handleTextChange("inputUserID")}
                    labelWidth={0}
                  />
                </FormControl>
              </div>

              <div className="form-field margin-top-16">
                <div className="content-label">Password</div>
                <FormControl fullWidth variant="outlined">
                  <OutlinedInput
                    fullWidth
                    type="password"
                    placeholder="**********"
                    value={inputPassword}
                    onChange={this.handleTextChange("inputPassword")}
                    labelWidth={0}
                  />
                  {showError ? (
                    <FormHelperText className="password-incorrect-text">
                      Password is incorrect
                    </FormHelperText>
                  ) : null}
                </FormControl>
              </div>

              <div className="form-field">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={checkRememberID}
                      onChange={this.handleCheckboxChange("checkRememberID")}
                      value="checkRememberID"
                      color="primary"
                    />
                  }
                  label="Remember ID"
                />
              </div>

              <div className="form-field">
                <Button
                  className="next-button custom-button-style"
                  fullWidth
                  onClick={this.handleLoginClick}
                  variant="contained"
                  color="primary"
                >
                  Next
                  </Button>
              </div>


            </div>
          </DialogContent>

          <div className="bottom-row">
            <span className="helper-text">
              Don't have an account?
                <span
                onClick={this.handleSignUpClick}
                className="strong cursor-pointer"
              >
                {" "}
                  Sign Up
                </span>
            </span>
          </div>
        </Dialog>
      </div>
    );
  }

}

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

const mapDispatchToProps = {
  getProductList,
  login,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignIn);

authAction. js

export const login = (username, password) => (dispatch) => {
    //User Loading:
    dispatch({ type: USER_LOADING });
    //Make API Call here
    var myHeaders = new Headers();
    myHeaders.append("Authorization", "Basic dG9wc2VsbGVyOnRvcHNlbGxlcg==");

    var formdata = new FormData();
    formdata.append("username", username);
    formdata.append("password", password);
    formdata.append("grant_type", "password");

    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: formdata,
        redirect: 'follow'
    };

    fetch("https://api.XXXXXXXXXXXXX.com/oauth/token", requestOptions)
        .then(response => response.json())
        .then(
            res => {
                if (res.access_token && res.refresh_token) {
                    window.localStorage.access_token = res.access_token;
                    window.localStorage.refresh_token = res.refresh_token;
                    dispatch({
                        type: LOGIN_SUCCESS,
                        user: res
                    });
                } else {
                    dispatch({
                        type: LOGIN_FAIL,
                        message: 'Unauthorised User'
                    })
                }

            }
        )
        .catch(error =>
            dispatch({
                type: LOGIN_FAIL,
                message: error
            })
        );

}

Здесь я хочу выяснить, как перенаправить на /dashboard после успешного входа в систему. Я также использую response-router-dom .

Answer 1

Похоже, что после успешной попытки входа в систему {user} изменилось состояние вашего редукционного магазина.

, поэтому вы можете добавить это при входе. js

---

          import {Redirect } from 'react-router-dom';  

          class SignIn extends Component { 
          ...rest class..
          render ()
          const { user } = this.props;
          return( 
          <>
           { if (user)<Redirect to="/dashboard" />;} // in case { user } is null at initial state, otherewise change the checker... 
          ...rest code...
          </>
          )
}

---

рабочий пример - https://github.com/zero-to-mastery/visual-music/blob/development/src/pages/Login/Login.js

Answer 2

Один из простых ответов - просто использовать window.location.href в ванили Javascript:

CASE LOGIN_SUCCESS:
   window.location.href = '/dashboard';
   break;

Но это всего лишь взлом. Поскольку вы используете React-redux, вы должны удерживать состояние входа пользователя в режим редуктора. И пусть App.jsx подписывается состояние входа в систему и, если оно ложно, отображает компонент Redirect. Тем не менее, вы можете выбрать ваниль javascript, чтобы иногда было проще. :)

Почему ваше приложение забывает состояние входа в систему после перенаправления:

Поскольку вы что-то не так делаете с window.localStorage:

window.localStorage.whatever_token = 'foobarbaz';

Это не сработает. localStorage не предназначался для использования таким образом.

Вместо этого вы должны:

window.localStorage.setItem('my_token', 'awesome_jwt_token');

Позже:

const isLoggedIn = () = > {
  const token =  window.localStorage.getItem('my_token');
  if (token) {
    //    can ommit this flow
    //    const isLoggedIn = askServerIfThisTokenIsValid(token);
    //    if (isLoggedIn) {
    //        return true;
    //    } else {
    //        window.localStorage.removeItem('my_token');
    //    }
    return true; // but not safe - handle 403 error in all api calls
  } else {
    return false;
  }

};

Answer 3

Один из способов сделать это - использовать изменение состояния избыточности, чтобы решить, какой компонент визуализировать. Например, у вас может быть свойство, подобное «IsLoggedIn», в состоянии избыточности и когда его «true» отображает компонент «/ dashboard». что-то вроде:

if(IsLoggedIn) return (<Dashboard />)
else return (<Login />)