ReactJS 和 Redux 中的初始身份验证检查

Question

背景：我有一个显示电影列表的应用程序，但我想做的是只为获得授权的用户显示列表（通过检查存储在本地的令牌-存储）。

所以我想要实现的流程是：

1. 用户进入应用主页面
2. 检查本地存储是否有令牌
3. 如果是，检查它是否被授权
4. 如果授权 = 显示列表，否则不显示

所以我现在要做的就是在我创建商店后立即在我的主（包装器）组件中：

const store = configureStore();
var token = localStorage.get(authConstants.LOCAL_STORAGE_TOKEN_KEY);
if(token){
    store.dispatch(actions.checkInitialAuth(token));
}

checkInitialAuth 操作是：

export function checkInitialAuth(token){
    return dispatch => {
        dispatch(requestLogin());
        return fetch(authConstants.API_USER_DETAILS, {headers: { 'Authorization' : `Bearer ${token}`}})
            .then(function(response){
                if(!response.ok){
                    throw Error(response.statusText);
                }
                return response.json();
            })
            .then(function(user){
                localStorage.set(authConstants.LOCAL_STORAGE_TOKEN_KEY, token);
                dispatch(receiveLogin(user)); // <==========
                dispatch(setTopMovies()); // <==========
            })
            .catch(function(err){
                // TODO: handle errors
                console.log(err);
            });
    }
}

所以问题是，在创建存储之后和元素创建之前调用初始身份验证检查是否正确？

现在如果我必须在用户被授权的情况下调用更多操作，我是否必须在 checkInitialAuth 操作中的 then 中调用它们？它是进行所有动作调度调用的正确位置吗？

最后一个，当身份验证错误时（我手动将令牌更改为本地存储上的错误），console.log(err) 正在按预期记录，但我也有这个烦人的401 error in the console ，我可以以某种方式避免它吗？

非常感谢！

Answer 1

在创建存储之后和元素创建之前调用初始身份验证检查的正确位置吗？

是的。通常这是在将 store 传递给 Provider 之前进行所有初始化的地方。

这是进行所有动作调度调用的正确位置吗？

这在很大程度上取决于您的应用程序逻辑。您的组件可以检查用户是否经过身份验证以显示“topMovies”的正确内容。但是没有什么能阻止您在这里发送更多操作。

但是我在控制台中也有这个烦人的 401 错误，我可以避免吗？

是网络请求错误。这是您的fecth 正在联系的服务器的响应。如果您真的想隐藏错误，可以通过更改 Chrome Dev 控制台过滤器来隐藏错误（但为什么？）。