web-dev-qa-db-ja.com

反応後、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 Router v4。を使用しています。JWTでこのユーザーログインを正しい方法で実行しているかどうかを提案してください。

javascriptreactjsreduxreact-routerreact-redux
9
tapan dave

この history library を使用して、history.jsファイルに独自のhistoryを作成します。

//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`)
7
Anurag Awasthi
  1. _react-router-redux_を追加すると、すべてのルーティング情報を便利にRedux状態に追加できますが、_react-router-redux_からPushを使用することもできます。

dispatch(Push('/dashboard'))

_import { Push } from 'react-router-redux'_でアクセスできます

  1. あなたはJWTで何も悪いことをしていないと思います。 fetch呼び出しをヘルパー関数で抽象化します。承認後にアクセストークンを今後のすべてのリクエストに追加する必要があると思います。ヘルパー関数を使用すると、より簡単にコードをクリーンに保つことができます。
3
Yoshi

window.location.hrefはサーバーにヒットし、単一ページアプリケーションのすべての利点を失います。履歴オブジェクトではなくクライアント側ルーティングを使用する必要があります

このシナリオでは、履歴を含む最初のディスパッチをトリガーするコンポーネントからコールバックを渡すのが良い解決策です。新しい状態にプッシュします

例えば.

コンポーネントの小道具内で履歴にアクセスできると仮定します

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

window.location.href = ${app}/dashboardの代わりにコールバックを呼び出します

1
Karim