Reactjs 使用redux进行React身份验证

我正在使用react和redux创建用户身份验证页面。我提交登录表单，然后导航到profile页面，该页面显示用户的一些数据。问题是，当我将数据发布到服务器并在响应中获得令牌时，我将其保存在本地存储中，以便稍后可以使用该令牌获取该用户的数据。我只是想知道是否有其他方法可以将该令牌存储在redux中，而不是本地存储中，并将其传递给在redux中获取用户数据的函数。下面是我用来发布电子邮件和密码并将其存储在localstorage中的操作

function login(email, password) {



    return dispatch => {
        dispatch(request({ email }));

        userService.login(email, password)
            .then(
                user => {

                      //  console.log(user);
                //      console.log(user.data.token)
                  userService.fetchUserData(user.data.token)
                      .then(response =>{
                          console.log(response.data);
                          dispatch(success(response.data));
                          localStorage.setItem('user', JSON.stringify(response.data));




                          history.push(`${baseURL}/main`);

                      });
                    //history.push('/main');
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));


                }
            );
    };

    function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
    function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
    function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }
}

这是使用localstorage中的令牌获取数据的函数：

function login(email, password) {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
    };

    return fetch(`<backendURL>/auth/login`, requestOptions)
        .then(handleResponse)
        .then(user => {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
           // localStorage.setItem('user', JSON.stringify(user));
           // console.log('this is the token:'+user.data.token);
            let token=user.data.token
     //   console.log('this is the user token:'+token);



            return user;
        });
}

功能登录（电子邮件、密码）{
常量请求选项={
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（{email，password}）
};
返回fetch（`/auth/login`，requestOptions）
.然后（HandlerResponse）
。然后（用户=>{
//将用户详细信息和jwt令牌存储在本地存储中，以便在页面刷新之间保持用户登录
//setItem（'user'，JSON.stringify（user））；
//console.log（'这是令牌：'+user.data.token）；
让令牌=user.data.token
//log（'这是用户令牌：'+令牌）；
返回用户；
});
}

---

我希望我的问题足够清楚，我提前表示感谢

不建议将用户的身份验证令牌存储在Redux存储中

您可以将令牌存储在Redux存储中，并随时获取它。但您必须了解，用户会话需要由浏览器上的应用程序持久化，直到其有效。服务器使用认证令牌确认会话的有效性

话虽如此，Redux存储在浏览器刷新时被清除。这意味着存储区中存储的所有状态都将丢失，应用程序将再次装载。这将依次分派所有操作并从服务器获取最新数据。要从服务器获取数据，需要身份验证令牌，如果其存储在Redux存储中，则该令牌将不可用。这就是为什么要将令牌存储在localStorage中，这将确保即使页面刷新，令牌也可用

---

希望这有帮助

不建议将用户的身份验证令牌存储在Redux存储中

您可以将令牌存储在Redux存储中，并随时获取它。但您必须了解，用户会话需要由浏览器上的应用程序持久化，直到其有效。服务器使用认证令牌确认会话的有效性

话虽如此，Redux存储在浏览器刷新时被清除。这意味着存储区中存储的所有状态都将丢失，应用程序将再次装载。这将依次分派所有操作并从服务器获取最新数据。要从服务器获取数据，需要身份验证令牌，如果其存储在Redux存储中，则该令牌将不可用。这就是为什么要将令牌存储在localStorage中，这将确保即使页面刷新，令牌也可用

希望这有帮助