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

Posted 2023-02-19

【中文标题】登录后react-redux重定向到其他页面

【英文标题】：react-redux redirect to other page after login

【发布时间】：2018-04-07 20:31:48

【问题描述】：

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

【问题讨论】：

我对react不熟悉，但我认为可能是对window.location.href的误解，如果选择使用window.location.href，应该指定整个路径，所以对于实例可能是 window.location.href = localhost:5000/$app/dashboard。我认为这是一个很好的来源，***.com/questions/7077770/…

【参考方案1】：

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

【讨论】：

嘿，它工作得很好，但我已经创建了一个单独的路由认证功能，但它似乎现在正在工作，这是代码gist.github.com/5c6c14e2d2503b4d22872b983bccd978的链接，这是一个正确的方法吗？

你所说的$app是什么？

或者你可以将历史道具传递给登录操作。

【参考方案2】：

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

dispatch(push('/dashboard'))

你可以通过

import  push  from 'react-router-redux'

我认为您对 JWT 没有做错任何事情。我会用辅助函数抽象你的fetch 调用。我假设您需要在授权后将访问令牌添加到所有未来的请求中，并且使用帮助函数可以更轻松地完成并保持代码更清洁。

【讨论】：

感谢您的建议，但我尝试了 react-router-redux，但没有成功

你需要： 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> 有点设置，但值得。如果您需要我的帮助，请告诉我。

顺便说一句，毕竟你可以在你的组件中使用来自react-router的browserHistory：browserHistory.push('/login')。如果匿名需要访问仅对经过身份验证的用户可用的页面，则将用户重定向回登录可能很有用。

好的，谢谢，如果我需要帮助，我会告诉你，但是使用历史 API 也是一种简单快捷的解决方案，对吧？

当然可以。如果你只需要实现简单的重定向，history api 可能是最好的选择。

【参考方案3】：

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

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

例如

假设在你的组件 props 中你可以访问历史记录

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

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