Вы вызываете обратный вызов

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 Router v4. Подскажите, пожалуйста, правильно ли я делаю этот логин с JWT или нет.

 cruise_lab26 окт. 2017 г., 14:53
Я не знаком с реакцией, но я думаю, что это может быть неправильное понимание window.location.href. Если вы решите использовать window.location.href, вы должны указать весь путь, например, например, window.location.href =локальный: 5000 / ${Приложение} / приборная панель. Я думаю, что это довольно хороший источник,stackoverflow.com/questions/7077770/...

Ответы на вопрос(3)

Решение Вопроса

создать свой собственный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`)
 StephaneMombuleau29 дек. 2017 г., 14:58
Спасибо, но будьте осторожны, вы в какой-то момент написали «хистоту» :)
 Josh M.20 авг. 2018 г., 17:12
Что это${app} о чем ты говоришь?
 tapan dave26 окт. 2017 г., 15:13
эй, это сработало очень хорошо, но я создал отдельную функцию для аутентификации для маршрута, но кажется, что она сейчас работает, вот ссылка на кодgist.github.com/5c6c14e2d2503b4d22872b983bccd978 это правильный подход?
 indikaanu8328 авг. 2018 г., 15:43
или вы можете просто передать реквизиты истории в действие входа в систему.

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

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

например

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

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

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

Можете добавитьreact-router-redux который будет удобно добавлять всю информацию о маршрутизации в состояние Redux, но вы также можете использоватьpush изreact-router-redux по:

dispatch(push('/dashboard'))

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

Я думаю, что вы не делаете ничего плохого с JWT. Я бы абстрагировал твойfetch вызов с помощью вспомогательной функции. Я предполагаю, что вам нужно добавить свой токен доступа ко всем будущим запросам после авторизации, а с помощью вспомогательной функции вы можете сделать это проще и сохранить ваш код чище.
 tapan dave26 окт. 2017 г., 15:21
о, спасибо, можете поделиться каким-нибудь примером
 Yoshi26 окт. 2017 г., 15:28
Кстати, после всего, что вы можете использоватьbrowserHistory изreact-router в вашем компоненте:browserHistory.push('/login'), Может быть полезно перенаправить пользователя обратно на страницу входа, если анонимный пользователь должен получить доступ к странице, доступной только для аутентифицированных пользователей.
 tapan dave26 окт. 2017 г., 15:14
спасибо за предложение, но я пробовал реагировать-маршрутизатор-редукс, но не работал
 tapan dave26 окт. 2017 г., 15:33
Хорошо, спасибо, если мне нужна помощь, я сообщу вам, но использование истории API также является простым и быстрым решением, верно?
 Yoshi26 окт. 2017 г., 15:25
Вам необходимо: 1.import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux'; 2.import { createStore, applyMiddleware, compose } from 'redux'; 3.import { BrowserRouter } from 'react-router-dom'; 4.const store = createStore([YOUR ROOT REDUCER], applyMiddleware(routerMiddleware(browserHistory),)); // Вам может понадобиться создать промежуточное программное обеспечение, если вы используете другие. 5.const history = syncHistoryWithStore(browserHistory, store); 6.<BrowserRouter><Router history={history}> Это немного настройки, но оно того стоит. Дай мне знать, если тебе понадобится моя помощь.

Ваш ответ на вопрос