刷新 React 页面时 LocalStorage 不断被清除

Question

我正在开发一个 React 应用程序。我将访问令牌存储在本地存储中以对用户进行身份验证。但每当我刷新页面时，访问令牌似乎为空。所以我一直退出。我不知道出了什么问题。请在这件事上给予我帮助。非常感谢。

这是我的登录代码：

    const navigate = useNavigate();
    const location = useLocation();
    const dispatch = useDispatch();

    // const from = location.state?.from?.pathname || "/admin/documents";

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [message, setMessage] = useState("Đã xảy ra lỗi!");
    const [emailMessage, setEmailMessage] = useState("");
    const [passwordMessage, setPasswordMessage] = useState("");
    const [status, setStatus] = useState(0);
    const [isLoading, setIsLoading] = useState(false);

    const errRef = useRef();

    useEffect(() => {
        localStorage.removeItem("accessToken");
        localStorage.removeItem("refreshToken");
    }, []);

    useEffect(() => {
        setMessage("");
        setEmailMessage("");
        setPasswordMessage("");
    }, [email, password]);

    const validateEmail = () => {
        if (email === "" || email.trim() === "") {
            setEmailMessage("Email không được để trống");
        } else if (!emailRegrex.test(email)) {
            setEmailMessage("Email không hợp lệ");
        }
    };

    const validatePassword = () => {
        if (password === "" || password.trim() === "") {
            setPasswordMessage("Mật khẩu không được để trống");
        }
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        setIsLoading(true);

        validateEmail();
        validatePassword();

        if (!emailMessage && !passwordMessage) {
            try {
                const response = await axios.post(LOGIN_URL, JSON.stringify({ email, password }), {
                    headers: { "Content-Type": "application/json" },
                    withCredentials: true,
                });

                setIsLoading(false);

                if (response.data.status === 401) {
                    setMessage("Email hoặc mật khẩu không đúng!");
                    setStatus(-1);
                    setTimeout(() => {
                        setStatus(0);
                    }, 4000);
                } else if (response.data.status === 403) {
                    setMessage("Tài khoản không có quyền truy cập!");
                    setStatus(-1);
                    setTimeout(() => {
                        setStatus(0);
                    }, 4000);
                } else if (response.data.status === 400) {
                    setMessage("Có lỗi xảy ra!");
                    setStatus(-1);
                    setTimeout(() => {
                        setStatus(0);
                    }, 4000);
                } else {
                    alert("JJJJJJJJ")
                    setMessage("Đăng nhập thành công!");
                    localStorage.setItem("accessToken", response.data.data.accessToken);
                    localStorage.setItem("refreshToken", response.data.data.refreshToken);

                    const config = {
                        headers: {
                            Authorization: "Bearer " + response.data.data.accessToken,
                        },
                    };

                    const res = await getProfile(config);
                    const user = res.data;

                    dispatch(loginAction.setUser(user));

                    setStatus(1);
                    setTimeout(() => {
                        navigate("/manager/home");
                        setStatus(0);
                    }, 2000);
                }
            } catch (error) {
                setStatus(-1);
                setMessage("Đã xảy ra lỗi!");
                setTimeout(() => {
                    setStatus(0);
                }, 4000);
            }
        }
    };

我的代码附加令牌：

useEffect(() => {
        const requestInterceptor = privateAxios.interceptors.request.use(
            (config) => {
                const accessToken = localStorage.getItem("accessToken");

                if (!accessToken) navigate("/admin/login");
                else config.headers.Authorization = `Bearer ${accessToken}`;

                return config;
            },
            (error) => Promise.reject(error),
        );

        const responseInterceptor = privateAxios.interceptors.response.use(
            (response) => {
                if (response.data.status === 401) {
                    if (response.data.message === "User unauthorized. Please log in first.") navigate("/admin/login");
                } else if (response.data.status === 403) navigate("/admin/login");

                return response;
            },
            (error) => {
                return Promise.reject(error);
            },
        );

        return () => {
            privateAxios.interceptors.request.eject(requestInterceptor);
            privateAxios.interceptors.response.eject(responseInterceptor);
        };
    }, [navigate]);
    return privateAxios;

Answer 1

useEffect(() => {
        localStorage.removeItem("accessToken");
        localStorage.removeItem("refreshToken");
    }, []);

此代码是罪魁祸首，每当您刷新页面时，上述代码都会在开始时执行并删除您的 accessToken 和 refreshToken。

删除此代码并让我知道它是否有效。