避免登录表单闪烁的反应
避免登录表单闪烁的反应
提问于 2022-02-22 14:04:13
我有React中的注册/登录工作流(NextJS)，一切都正常工作；我做了一个自定义钩子来远程检查用户是否基于localStorage jwt进行了身份验证：
import React, { useState, useEffect } from 'react';
import axios from '../lib/api';
const useUser = () => {
const [logged, setIsLogged] = useState(false);
const [user, setUser] = useState('');
useEffect(async () => {
const jwt = localStorage.getItem('jwt');
if (!jwt) return;
await axios
.get('/api/users/me', {
headers: {
Authorization: `Bearer ${jwt}`,
},
})
.then((response) => {
setUser(response.data);
setIsLogged(true);
})
.catch((error) => {});
}, []);
return [logged, user, setIsLogged];
};
export default useUser;这个钩子在99%的情况下都可以正常工作，但是当我进入登录表单页面时，登录表单会闪到登录用户，因为在初始化检查之前，登录状态是假的。
import React, { useEffect, useState } from 'react';
import useUser from '../../lib/useUser';
import { useRouter } from 'next/router';
import LoginForm from '../../components/LoginForm';
function Login() {
const { push } = useRouter();
const [logged] = useUser();
console.log(ljwt, logged);
if (logged) {
//push('/');
return <p>nored</p>;
}
if (!logged) {
return <LoginForm />;
}
}
export default Login;我怎么才能避免这种情况？我试图将jwt传递给useUser，因此假设用户在执行远程检查时登录，但它并不像预期的那样工作。有什么建议吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-22 14:10:43
当登录状态仍然不确定时，不要呈现登录表单。
顺便说一句，useEffect函数本身不可能是异步的，因为它们要么不需要返回任何东西，要么需要一个清理函数；async函数总是返回一个承诺。
async function getLoginState() {
const jwt = localStorage.getItem("jwt");
if (!jwt) return [false, null];
const resp = await axios.get("/api/users/me", {
headers: {
Authorization: `Bearer ${jwt}`,
},
});
return [true, response.data];
}
/**
* Get user login state.
*
* Returns undefined if the login state is not yet known.
* Returns a 2-item array [loginState, user] otherwise.
* `user` can be null when `loginState` is false.
*/
function useLoginState() {
const [loginState, setLoginState] = useState(undefined);
useEffect(() => {
getLoginState().then(setLoginState);
}, []);
return loginState;
}
function Login() {
const { push } = useRouter();
const loginState = useLoginState();
if (loginState === undefined) {
return <>Loading...</>;
}
const [logged, user] = loginState;
if (logged) {
return <p>Hi, {JSON.stringify(user)}</p>;
} else {
return <LoginForm />;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71222706
复制相关文章
相似问题
腾讯云开发者
