Move auth token logic to useApi hook.

This commit is contained in:
Mike Cao 2022-02-26 15:53:45 -08:00
parent d19b6b5a82
commit 3a8bfd1dbd
7 changed files with 56 additions and 28 deletions

View file

@ -1,25 +1,48 @@
import { useCallback } from 'react';
import { useRouter } from 'next/router';
import { get, post, put, del } from 'lib/web';
import { get, post, put, del, getItem } from 'lib/web';
import { AUTH_TOKEN } from 'lib/constants';
function includeAuthToken(headers) {
const authToken = getItem(AUTH_TOKEN);
if (authToken) {
headers.Authorization = `Bearer ${authToken}`;
}
return headers;
}
export default function useApi() {
const { basePath } = useRouter();
return {
get: useCallback(async (url, params, headers) => {
return get(`${basePath}/api/${url}`, params, headers);
}, []),
get: useCallback(
async (url, params, headers = {}) => {
return get(`${basePath}/api/${url}`, params, includeAuthToken(headers));
},
[get],
),
post: useCallback(async (url, params, headers) => {
return post(`${basePath}/api/${url}`, params, headers);
}, []),
post: useCallback(
async (url, params, headers) => {
return post(`${basePath}/api/${url}`, params, includeAuthToken(headers));
},
[post],
),
put: useCallback(async (url, params, headers) => {
return put(`${basePath}/api/${url}`, params, headers);
}, []),
put: useCallback(
async (url, params, headers) => {
return put(`${basePath}/api/${url}`, params, includeAuthToken(headers));
},
[put],
),
del: useCallback(async (url, params, headers) => {
return del(`${basePath}/api/${url}`, params, headers);
}, []),
del: useCallback(
async (url, params, headers) => {
return del(`${basePath}/api/${url}`, params, includeAuthToken(headers));
},
[del],
),
};
}

View file

@ -1,20 +1,22 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import useUser from 'hooks/useUser';
import { get } from 'lib/web';
import useApi from 'hooks/useApi';
export default function useRequireLogin() {
const router = useRouter();
const { get } = useApi();
const { user, setUser } = useUser();
const [loading, setLoading] = useState(false);
async function loadUser() {
setLoading(true);
const { ok, data } = await get(`${router.basePath}/api/auth/verify`);
const { ok, data } = await get('/auth/verify');
if (!ok) {
return router.push('/login');
await router.push('/login');
return null;
}
setUser(data);
@ -23,12 +25,12 @@ export default function useRequireLogin() {
}
useEffect(() => {
if (!loading && user) {
if (loading || user) {
return;
}
loadUser();
}, []);
}, [user, loading]);
return { user, loading };
}