使用 redux 响应身份验证答案

【问题标题】：React authentication using redux使用 redux 响应身份验证
【发布时间】：2020-10-06 03:39:00
【问题描述】：

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

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 } }
}

这是使用本地存储中的令牌获取数据的函数：


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;
        });
}

我希望我的问题足够清楚，我提前致谢。

【问题讨论】：

标签： reactjs authentication redux

【解决方案1】：

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

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

话虽如此，Redux 存储在浏览器刷新时被清除。这意味着存储在存储中的所有状态都将丢失，应用程序将再次挂载。这将依次调度所有操作并从服务器获取最新数据。要从服务器获取数据，需要 Auth 令牌，如果它存储在 Redux 存储中，它将不可用。这就是为什么您将 Token 存储在 localStorage 中的原因，这将确保即使页面刷新也可以使用令牌。

希望这会有所帮助！

【讨论】：