reactjs - 使用 ReactJs + Redux + thunk 避免显示来自其他用户的数据(旧数据)

Question

我已经阅读/观看了一些关于 ReactJs with Redux 的指南/教程，了解如何使用它来获取数据并将其显示在屏幕上。基本的是:

const DataView = () => {
    const dispatch = useDispatch(); 
    const {data} = useSelector(data => data);
    
    useEffect(() => {
        dispatch(getData());
    }, []);

    return (
    
    // show data
        
    );
};

这很好用。数据提取已完成，数据已正确显示。

但是，如果这些数据是合理的，其他人应该看不到呢？如果我第一次进入这个屏幕，“数据”将是空的。这里没问题。 useEffect 将执行数据获取，完成后会显示信息。

现在，如果我转到另一个页面，然后返回那里会怎样。因为“数据”不再是空的，所以我将显示旧数据，直到再次完成提取。这不是问题，因为我使用的是同一个用户。

如果该用户注销，而另一个用户登录怎么办？如果新用户进入此页面，我将显示其他用户信息，直到获取完成(这可能需要几秒钟)。

我正在考虑几个选项来“解决”这个问题，但我不确定哪一个是正确的:

1. 将信息存储在链接到用户 session 的缩减程序中。

2. 直接调用 axios 来获取数据，以避免显示来自 axios reducer 的旧数据。

3. 登录/注销后清除reducers信息

欢迎任何解释这种情况的博文/视频/书籍!谢谢!

Answer 1

只是我的 2 美分 ...

出于您已经提到的安全原因，我在 Redux 存储中管理的所有数据始终与当前登录的用户相关。

在注销或过期 session (jwt + 刷新 token )时，我总是通过 redux-reset 重置 Redux 存储.

一般来说，我看不出有什么好的理由在本地保留/持久保存多个用户 session 数据。

这里有一些与主题相关的好资源:

* 简而言之，他们所做的只是在注销时重置/清除商店 + 本地存储/cookie。

1. How to Secure Your User’s Data After Logout in Redux
2. Secure Your React and Redux App with JWT Authentication
3. Is Redux a secure place to store JWT tokens?