javascript 登录后react-redux重定向到其他页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46954647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react-redux redirect to other page after login
提问by tapan dave
action.js:
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)
}
};
I am unable to redirect in a single-page manner to my dashboard, I searched a lot but I didn't get anything useful. I am using React Router v4. Can you please suggest whether I am doing this user login with JWT the right way or not.
我无法以单页方式重定向到我的仪表板，我搜索了很多，但没有得到任何有用的信息。我正在使用 React Router v4。您能否建议我是否以正确的方式使用 JWT 进行此用户登录。
采纳答案by Anurag Awasthi
create a your own historyin history.jsfile using this history library.
使用此历史库创建您自己history的history.js文件。
//history.js
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
export default history
Supply it to your router:
将其提供给您的路由器：
<Router history = {history}>.....</Router>
Then you can use this historyobject to redirect from anywhere. In your action:
然后你可以使用这个history对象从任何地方重定向。在你的行动中：
import history from './history'
history.push(`${app}/dashboard`)
回答by Yoshi
- You can add
react-router-reduxwhich will conveniently add all routing info to the Redux state, but also you can usepushfromreact-router-reduxby:
- 您可以添加
react-router-reduxwhich 将方便地将所有路由信息添加到 Redux 状态，但您也可以使用pushfromreact-router-redux：
dispatch(push('/dashboard'))
dispatch(push('/dashboard'))
You can access it by import { push } from 'react-router-redux'
您可以通过 import { push } from 'react-router-redux'
- I think you are not doing anything wrong with JWT. I would abstract your
fetchcall with the helper function. I assume you need to add your access token to all future requests after authorization, and using helper function you can do it easier and keep you code cleaner.
- 我认为您对 JWT 没有做错任何事情。我会
fetch用辅助函数抽象你的调用。我假设您需要在授权后将您的访问令牌添加到所有未来的请求中，并且使用辅助功能可以更轻松地完成并保持代码更简洁。
回答by Karim
window.location.hrefwill hit your server and you'll loose all the benefits of a single page application, you should use a client side routing instead with the history object
window.location.href将访问您的服务器并且您将失去单页应用程序的所有好处，您应该使用客户端路由而不是历史对象
In this scenario a good solution could be pass a callback from the component that triggers the first dispatch containing a history.push to the new state
在这种情况下，一个好的解决方案可能是从触发第一个包含 history.push 的分派到新状态的组件传递回调
e.g.
例如
Assuming that inside your component props you have access to history
假设在您的组件道具中您可以访问历史记录
login(body, () => {
this.props.history.push('/dashboard');
})
then in place of window.location.href = ${app}/dashboardyou invoke the callback
然后代替window.location.href = ${app}/dashboard你调用回调
