Question

我正在使用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 } }
}

这是使用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;
        });
}

我希望我的问题很清楚，在此先感谢。

Answer 1

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

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

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

希望这会有所帮助！

使用Redux进行身份验证

1 个答案: