Пишу код на Next.js v.13. Для получения данных пользователя использую функцию SWR:
const fetcher = (url) => fetch( url, { credentials: "include" } ).then( res => res.json() );
export const useUser = () => {
const { data, error, isLoading } = useSWR( `${ baseApi }getuser`, fetcher );
return {
user: data,
isLoading,
error
};
};
Потом получаю пользователя в компоненте UserIcon:
import { useUser } from "@/services/useUser";
export default function UserIcon() {
const {user } = useUser();
return (
<div >
<span >{ user?.name.slice( 0, 1 ).toUpperCase() }</span>
</div>
);
}
При выходе использую функцию Logout:
import { NextResponse } from "next/server";
import { useSWRConfig } from "swr";
const logout = async() => {
let response = NextResponse.next();
const { mutate } = useSWRConfig();
axios.post( `${ baseApi }logout` )
.then( res => {
response.cookies.delete( "XSRF-TOKEN" );
} );
await mutate( `${ baseApi }getuser` );
router.push( "/" );
};
На бэке все срабатывает и пользователь выходит, а в браузере в куках все еще сохраняется XSRF-TOKEN, и пользователь тоже все еще сохраняется (в иконке показывается имя пользователя). И только при обновлении браузера пользователь становится undefined, как и должно быть. Как сделать, чтобы данные о пользователе обновлялись сразу при выходе, не дожидаясь перезагрузки браузера?