Question

1。。如何在类似波纹管的功能中访问Redux dispatch功能和路由器history对象

export const loginHelper = ({ userInfo }) => {
    dispatch(loginUser(userInfo)); // from where can i get dispatch ??
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
    history.push('/foo/search'); // from where can i get history ??
}

2。而不是localStorage可以在哪里存储用户信息数据，因此当我关闭浏览器时，它也会被清除

Answer 1

使用localStorage停止这很重要：有关本地存储的大多数坏事并不那么重要。您仍然可以摆脱使用它的麻烦，但是您的应用程序会稍微慢一些，而开发人员会感到烦恼。本地存储并非旨在用作浏览器中的安全存储机制。它被设计为仅字符串的键/值存储库，开发人员可以使用它来构建稍微复杂一些的单页应用程序。就是这样。

真正的问题归结为跨站点脚本攻击（XSS）。

如果攻击者可以在您的网站上运行JavaScript，则他们可以检索您存储在本地存储中的所有数据并将其发送到他们自己的域中。这意味着您在本地存储中敏感的任何内容（例如用户的会话数据）都可能受到损害。

要回答您的问题，请尝试分发userInfo并通过化简器将其保存在商店中。然后使用它来查询userInfo数据。

Answer 2

当您需要对操作执行一些操作时，需要使用自定义中间件。由于动作是简单的对象，因此不会有副作用。解决方法是使用redux-thunk或redux-saga之类的东西。这是redux-thunk截获的动作的示例：

const myAsyncActionCreator = payload =>{
    return (dispatch, getState) =>{
        const endpoint = 'http://api.myproject/data'
        const headers = {headers:{Authorization: 'bearer '+ getState().auth.token}}
        axios.post(endpoint, payload, headers)
            .then(res => dispatch({type: 'type', res.data})).catch(/*...*/)
     }
}

thunk提供的第一个参数是dispatch，当所有异步操作完成后，第二个参数是getState，这是访问应用程序当前状态的简便方法

身份验证和Redux /路由器问题

2 个答案: