Блог

Я создал страницу входа в систему, которая должна войти username и password для аутентификации. После аутентификации я push history подключаюсь к Homepage с помощью react-router и устанавливаю cookie . Код похож:

 const handleLogin = () =>{
        const options = {
            url: "http://test/login",
            method: "POST",
            withCredentials: true,
            headers:{
                "Accept": "application/json",
                "content-Type": "application/json;charset-UTF-8"
            },
            data: {
                "username": user,
                "password": pass,
            }
        };
        Axios(options).then(Response =>{
            if(Response.data.JWT){
                let decode = jwt_decode(Response.data.JWT);
                if(decode.id){
                    setLoginUser(decode.username);
                    setAuthenticated(true);
                    history.push('/Homepage');
                    Cookies.set("isLogged", {expires: 1} )
                }
            }else{
                alert("Invalid user");
            }  
        });
    }
  

Я также использовал JWT из серверной части, здесь приложение работает нормально. Но когда я обновляю веб-страницу, я проверяю через файлы cookie, чтобы токен обновления оставался на домашней странице, и удаляю его для выхода из системы.

 const readCookie = () => {
    let user = false;
    if(user = Cookies.get("isLogged")){
        history.push('/Homepage');
        setAuthenticated(true);
    }else{
        history.push('/');
    }
}
useEffect(() => {
    readCookie()
},[]);
  

Можно ли получить токен обновления таким образом?

Ваша функция снаружи должна зависеть от вашей useEffect . Чтобы избежать этого, просто переместите его внутрь хука. В остальном, на мой взгляд, все хорошо. Чтение файлов cookie является побочным эффектом, поэтому вы делаете это правильно.

 useEffect(() => {
  const readCookie = () => {
    let user = false;
    if(user = Cookies.get("isLogged")){
        history.push('/Homepage');
        setAuthenticated(true);
    }else{
        history.push('/');
    }
  }

  readCookie()
},[]);
  

Если вы хотите оставить его readCookies за пределами хука, вам придется обернуть его в useCallback хук и использовать в своей зависимости, вот так:

 const readCookiesCallback = useCallback(() => {/* your read cookies code */}, [])

useEffect(() => {
  readCookiesCallback()
}, [readCookiesCallback])
  

Для того, что вы делаете, в этом нет необходимости. Мой первый пример — это путь.