0

我在我的 React 应用程序中使用https://github.com/anthonyjgrove/react-google-login进行身份验证。一切正常，除非我关闭所有选项卡并返回我的网站（在几秒钟内，甚至没有那么长），我必须再次登录......我怎样才能将登录保持一段时间？

这是我当前的设置：

<GoogleLogin
    clientId={process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID}
    buttonText='Continue with Google'
    onSuccess={handleGoogleOAuthResponse}
    onFailure={handleError}
    isSignedIn={true}
    prompt='consent'
    accessType='offline'
    redirectUri={process.env.REACT_APP_FRONT_END_BASE_URL}
/>

const handleGoogleOAuthResponse = ({ accessToken, profileObj }) => {
    postRequest('rest-auth/google/', null, { 'access_token': accessToken }) // backend in Django
    .then(({ access_token, refresh_token, user }) => {
        setAccessToken(access_token); // these are just local states
        setRefreshToken(refresh_token);
        setProfile(profileObj);
        setError(null);
    })
    .catch(error => {
        setError(error);
    });
};

const handleError = (error, details) => {
    setError(`${error}: ${details}`);
}
4

1 回答 1

0

问题在于仅使用临时状态，因为它仅在内存中，因此在页面重新加载（甚至每次组件卸载时）时都会丢失。一种快速的解决方案是将您的令牌也存储在localStorage：

    .then(({ access_token, refresh_token, user }) => {
        setAccessToken(access_token); // these are just local states
        setRefreshToken(refresh_token);
        setProfile(profileObj);
        setError(null);

        // in addition to existing code above, add this part to persist the tokens
        localStorage.setItem('accessTokenKey', access_token);
        localStorage.setItem('refreshTokenKey', refresh_token);
    })

存储令牌后，我们还需要在下次启动应用程序时加载它们，可以这样完成：

useEffect(() => {
    const access_token = localStorage.getItem('accessTokenKey');
    const refresh_token = localStorage.setItem('refreshTokenKey');
    setAccessToken(access_token);
    setRefreshToken(refresh_token);
}, []);

或用作useState钩子中的初始状态：

const [refreshToken, setRefreshToken] = useState(localStorage.getItem('refreshTokenKey'));
const [accessToken, setAccessToken] = useState(localStorage.getItem('accessTokenKey'));
于 2021-04-18T10:29:24.320 回答