RTK Query авторизация sanctum + fortify

Question

Я делаю авторизацию на laravel sanctum и fortify, а на клиенте использую react + redux toolkit. После успешного входа я через RTK query получаю данные авторизованного пользователя getUser

export const prepareAuthHeader = (headers: any, { getState, endpoint }: any) => {
    const CSRF_token = Cookies.get('XSRF-TOKEN');

    if (CSRF_token && endpoint !== 'refresh')
        headers.set('X-XSRF-TOKEN', CSRF_token);

    // For laravel API to disable redirects and enable JSON response
    headers.set('Accept', 'application/json');

    return headers;
}

export const authApi = createApi({
    reducerPath: 'auth/api',
    baseQuery: fetchBaseQuery({
        baseUrl: '/api/',
        prepareHeaders: prepareAuthHeader,
        credentials: 'include',
    }),
    tagTypes: ['User'],
    endpoints: (builder) => ({
        register: builder.mutation<{ user: any, token: string }, {
            name: string,
            email: string,
            password: string,
            password_confirmation: string,
        }>({
            query: (payload) => ({
                url: `register`,
                method: 'POST',
                body: payload
            }),
            invalidatesTags: ["User"],
        }),
        login: builder.mutation<{ user: any, token: string }, {
            email: string,
            password: string,
        }>({
            query: (payload) => ({
                url: `login`,
                method: 'POST',
                body: payload,
            }),
            invalidatesTags: ["User"],
        }),
        logout: builder.mutation<void, void>({
            query: () => ({
                url: `logout`,
                method: 'POST',
            }),
            invalidatesTags: ["User"],
        }),
        getUser: builder.query<IUser, void>({
            query: () => ({
                url: `user`,
                credentials: "include",
            }),
            providesTags: ["User"],
            async onQueryStarted(id, {dispatch, queryFulfilled}) {
                // Put user in slice store
                const {data} = await queryFulfilled;
                dispatch(setUser(data))
            }
        }),
    })
});

А в index.tsx у меня следующий код, который сразу при загрузке забирает авторизованного пользователя, если он есть

/**
 * Load user data
 */
const loadUser = () => {
    store.dispatch(authApi.endpoints.getUser.initiate());
}

// Get CSRF token for API and first load user data
if(!Cookies.get('XSRF-TOKEN'))
    fetch('/sanctum/csrf-cookie', {
        headers: {
            'Accept': 'application/json'
        },
        credentials: 'include'
    }).then(response => loadUser());
else loadUser();

//
// Mount react

Вопрос в следующем. Где правильнее хранить авторизованного user? Сейчас я после его загрузки отправляю юзера в auth.slice.ts. То есть, что бы получить ползователя где-то в коде: const user = useTSelector(state => state.auth.user);.

Но можно же просто написать const {data: user} = useGetUserQuery(). Так короче)

У кого был опыт такой авторизации, можете рассказать о плюсах и минусах обоих способов? Есть ли вообще разница. Да, знаю, что вопрос, скорее субъективный, но всё же. Как в случае второго способа удалить пользователя при logout'е?

БЛОГ НА HUSL

RTK Query авторизация sanctum + fortify

Ответы (0 шт):