Question

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进行此用户登录。

Answer 1

使用此history library在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`)

Answer 2

您可以添加react-router-redux，方便地将所有路由信息添加到Redux状态，但您也可以使用push中的react-router-redux：

dispatch(push('/dashboard'))

您可以import { push } from 'react-router-redux'

我认为你没有对JWT做错任何事。我会使用辅助函数抽象你的fetch调用。我假设您需要在授权后将所有访问令牌添加到所有将来的请求中，并且使用帮助程序功能可以更轻松地执行此操作并使代码更清晰。

Answer 3

window.location.href会点击您的服务器并且您将失去单页应用程序的所有好处，您应该使用客户端路由而不是历史对象

在这种情况下，一个好的解决方案可以是从触发包含history.push的第一个调度的组件传递回调到新状态

e.g。

假设您的组件内部有道具，您可以访问历史记录

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

然后代替window.location.href = ${app}/dashboard调用回调

在登录后，react-redux重定向到其他页面

3 个答案: