在React Router中，如何在页面刷新时保持登录状态？

18 浏览
0 Comments

在React Router中，如何在页面刷新时保持登录状态？

我正在使用React、React Router和Redux制作一个网站。很多路由（页面）需要用户登录。如果用户没有登录，我可以通过以下方式重定向到登录页面：

function requireAuth(nextState, replace) {
    let loggedIn = store.getState().AppReducer.UserReducer.loggedIn;
    if(!loggedIn) {
        replace({
            pathname: '/login',
            state: {
                nextpathname: nextState.location.pathname
            }
        });
    }
}
ReactDOM.render(
    
        
            
                
                
                
                
                    ... 还有其他需要登录的路由 ...
                
            
        
    ,
    document.getElementById('entry')
);

请看代码，我使用了onEnter钩子来重定向到'/login'路由，如果用户没有登录。用于检查用户是否登录的数据存储在store中，在用户登录后会更新。

这个方法运行得很好，但是问题是当我刷新页面时，store会重置，用户的登录状态也会被重置。

我知道这是因为Redux store只是内存存储，所以刷新页面会丢失store中的所有数据。

在每次刷新时检查服务器会话可能有效，但这可能会导致太多的请求，所以这似乎不是一个好主意。

将已登录状态数据保存到localStorage可能有效，但在这种情况下，我应该检查每个AJAX调用失败的请求是否被拒绝，因为会话已过期或不存在之类的，而这似乎也不是一个好主意。

有没有更简单的方法来解决这个问题？我的网站需要处理大量的用户，所以我希望尽量减少XHR调用。

非常感谢您的建议。

0