时间戳

首页 > 解决方案 > 如何使用令牌持久登录？

javascript - 如何使用令牌持久登录？

问题描述

您好，我已经创建了用于登录和注册的 dotnet core web api，但在应用程序中刷新后它总是尝试再次登录。由于我是原生反应新手，因此无法将解决方案应用于我的项目。我使用 redux，这是我的操作：

export const signin = (email, password) => {
  return async dispatch => {
    const response = await fetch(
      'http://localhost:5000/api/user/login',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: email,
          password: password,

        }),
      }
    );

    if (!response.ok) {
      throw new Error('Something went wrong!');
    }

    const resData = await response.json();
    console.log(resData);
    dispatch({ type: SINGIN, token: resData.token, userId: resData.id });
    saveDataToStorage(resData.token);
  };
};

const saveDataToStorage = (token, userId) => {
  AsyncStorage.setItem('userData', JSON.stringify({
    token: token,
  })
  );
};

这是我的带有反应导航 5 的导航器：

export const Navigator = () => {
    const [userToken, setUserToken] = React.useState(null);
    const userData = AsyncStorage.getItem('userData');

    const authContext = React.useMemo(() => {
        return {
            signIn: () => {
                setUserToken(userData);
            },
            singnUp: () => {
                setUserToken(userData);
            },
            signOut: () => {
                setUserToken(null);
            },
        };
    }, [userData]);

    return (
        <AuthContext.Provider value={authContext}>
            <NavigationContainer>
                <RootStackScreen userToken={userToken} />
            </NavigationContainer>
        </AuthContext.Provider >
    );
};

正如我所说，我找不到应用我找到的解决方案的方法。谢谢你的帮助。

标签： javascriptreact-nativereduxreact-reduxredux-thunk

解决方案

首先，确保您使用 AsyncStorage 的所有操作都应该是异步的（使用 promise 或 async/await）。

然后按照这个来实现您的应用程序的身份验证流程。

https://reactnavigation.org/docs/auth-flow

我的这个回答会对你有所帮助。

React Navigation 5 身份验证流程

推荐阅读