it-swarm.com.ru

React-Redux перенаправить на другую страницу после входа

action.js:

export const login = creds => {
    console.log(`${url}/login`);
    const requestOptions = {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        },
        body: creds
    };

    return function(dispatch) {
        dispatch({ type: LOGIN_REQUEST });
        function timer() {
            return fetch(`${url}/login`, requestOptions).then(response => {
                if (!response.ok) {
                    console.log(response);
                    return response.json().then(json => {
                        var error = new Error(json.message);
                        error.response = response;
                        throw error;
                    });
                } else {
                    console.log("3");
                    return response.json();
                }
            }).then(user => {
                if (user.message === "ok") {
                    localStorage.setItem("token", user.token);
                    dispatch({ type: LOGIN_SUCCESS, payload: user.token });
                    window.location.href = `${app}/dashboard`;
                } else {
                    const error = user.message;
                    throw new Error(error);
                }
            }).catch(function(error) {
                dispatch(loginError(error));
            });
        }
        setTimeout(timer, 5000)
    }
};

Я не могу перенаправить одностраничным способом на свою панель, я много искал, но ничего полезного не получил. Я использую React Маршрутизатор v4. Подскажите, пожалуйста, правильно ли я делаю этот логин с JWT или нет.

6
tapan dave

создайте свой собственный файл history в файле history.js, используя эту библиотеку истории .

//history.js
import createHistory from 'history/createBrowserHistory'

const history = createHistory()

export default history

Поставьте его на ваш роутер:

<Router history = {history}>.....</Router>

Затем вы можете использовать этот объект history для перенаправления из любого места. В ваших действиях:

import history from './history'
history.Push(`${app}/dashboard`)
6
nrgwsth
  1. Вы можете добавить react-router-redux, который будет удобно добавлять всю информацию о маршрутизации в состояние Redux, но также вы можете использовать Push из react-router-redux:

dispatch(Push('/dashboard'))

Вы можете получить к нему доступ по import { Push } from 'react-router-redux'

  1. Я думаю, что вы не делаете ничего плохого с JWT. Я бы абстрагировал ваш вызов fetch с помощью вспомогательной функции. Я предполагаю, что вам нужно добавить свой токен доступа ко всем будущим запросам после авторизации, а с помощью вспомогательной функции вы можете сделать это проще и сохранить ваш код чище.
3
Yoshi

window.location.href поразит ваш сервер, и вы потеряете все преимущества одностраничного приложения, вместо этого вы должны использовать маршрутизацию на стороне клиента с объектом history

В этом случае хорошим решением может быть передача обратного вызова от компонента, который запускает первую диспетчеризацию, содержащую историю. Перейдите в новое состояние.

например 

Предполагая, что внутри вашего компонента реквизит у вас есть доступ к истории 

login(body, () => {
  this.props.history.Push('/dashboard');
})

затем вместо window.location.href = ${app}/dashboard вы вызываете обратный вызов

1
Karim