使用 AuthContext 处理 React 应用程序的注销答案

【问题标题】：Handling the logout of the react app with AuthContext使用 AuthContext 处理 React 应用程序的注销
【发布时间】：2020-07-25 20:16:13
【问题描述】：

我一直在关注这个教程 https://dev.to/embeddednature/create-an-authorization-flow-with-react-navigation-5-x-2pkh

现在导航工作正常，但我没有让注销按钮工作。我只是不知道，添加代码的正确位置以及如何将该代码连接到按钮。

当我按下注销按钮时，什么也没有发生。而且我不确定const {signOut} = useContext(AuthContext);这一行是如何工作的。我应该在 AuthContext 中创建一个函数signOut吗？

这是我的代码的一部分

const createDrawer = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const {signOut} = useContext(AuthContext);

    return (
        <Drawer.Navigator
        screenOptions={{
          headerShown: true,
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}>

            <Drawer.Screen
                name="Overview"
                component={HomeScreen}
                options={{
                  headerRight:  () => (
                    <Button
                      onPress={() => signOut}
                      title="Logout"
                      color="#fff"
                    />
                  ),
                }}

            />
            <Drawer.Screen
               name="GameplayScreen"
               component={GameplayScreen}
               options={{
                 title: 'Playing',
               }}
                />


        </Drawer.Navigator>
    );
};

【问题讨论】：

标签： reactjs react-navigation logout

【解决方案1】：

终于我自己找到了答案：

在示例的 AuthContext 中，需要指定一个 signOut 函数。我们必须将状态 isSigned 设置为 false。该示例按预期工作，并显示登录屏幕。

export const AuthContext = createContext({
  signOut: () => {  
    AsyncStorage.setItem('userToken', null);
    state.isSignedIn = false;
  }
});

【讨论】：