client: use bearer token authorization

packages/client/src/components/cropper-dialog.vue

@@ -62,7 +62,6 @@ const ok = async () => {
 		croppedCanvas.toBlob(blob => {
 			const formData = new FormData();
 			formData.append('file', blob);
-			formData.append('i', $i.token);
 			if (defaultStore.state.uploadFolder) {
 				formData.append('folderId', defaultStore.state.uploadFolder);
 			}
@@ -70,6 +69,9 @@ const ok = async () => {
 			fetch(apiUrl + '/drive/files/create', {
 				method: 'POST',
 				body: formData,
+				headers: {
+					authorization: `Bearer ${$i.token}`,
+				},
 			})
 			.then(response => response.json())
 			.then(f => {

packages/client/src/components/page/page.post.vue

@@ -54,7 +54,6 @@ export default defineComponent({
 				canvas.toBlob(blob => {
 					const formData = new FormData();
 					formData.append('file', blob);
-					formData.append('i', this.$i.token);
 					if (this.$store.state.uploadFolder) {
 						formData.append('folderId', this.$store.state.uploadFolder);
 					}
@@ -62,6 +61,9 @@ export default defineComponent({
 					fetch(apiUrl + '/drive/files/create', {
 						method: 'POST',
 						body: formData,
+						headers: {
+							authorization: `Bearer ${this.$i.token}`,
+						},
 					})
 					.then(response => response.json())
 					.then(f => {

packages/client/src/os.ts

@@ -23,17 +23,16 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 		pendingApiRequestsCount.value--;
 	};
 
-	const promise = new Promise((resolve, reject) => {
+	const authorizationToken = token ?? $i?.token ?? undefined;
-		// Append a credential
+	const authorization = authorizationToken ? `Bearer ${authorizationToken}` : undefined;
-		if ($i) (data as any).i = $i.token;
-		if (token !== undefined) (data as any).i = token;
 
-		// Send request
+	const promise = new Promise((resolve, reject) => {
 		fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, {
 			method: 'POST',
 			body: JSON.stringify(data),
 			credentials: 'omit',
 			cache: 'no-cache',
+			headers: { authorization },
 		}).then(async (res) => {
 			const body = res.status === 204 ? null : await res.json();
 
@@ -52,7 +51,7 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 	return promise;
 }) as typeof apiClient.request;
 
-export const apiGet = ((endpoint: string, data: Record<string, any> = {}) => {
+export const apiGet = ((endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined) => {
 	pendingApiRequestsCount.value++;
 
 	const onFinally = () => {
@@ -61,12 +60,16 @@ export const apiGet = ((endpoint: string, data: Record<string, any> = {}) => {
 
 	const query = new URLSearchParams(data);
 
+	const authorizationToken = token ?? $i?.token ?? undefined;
+	const authorization = authorizationToken ? `Bearer ${authorizationToken}` : undefined;
+
 	const promise = new Promise((resolve, reject) => {
 		// Send request
 		fetch(`${apiUrl}/${endpoint}?${query}`, {
 			method: 'GET',
 			credentials: 'omit',
 			cache: 'default',
+			headers: { authorization },
 		}).then(async (res) => {
 			const body = res.status === 204 ? null : await res.json();
 

packages/client/src/scripts/upload.ts

@@ -71,7 +71,6 @@ export function uploadFile(
 			}
 
 			const formData = new FormData();
-			formData.append('i', $i.token);
 			formData.append('force', 'true');
 			formData.append('file', resizedImage || file);
 			formData.append('name', ctx.name);
@@ -79,6 +78,7 @@ export function uploadFile(
 
 			const xhr = new XMLHttpRequest();
 			xhr.open('POST', apiUrl + '/drive/files/create', true);
+			xhr.setRequestHeader('Authorization', `Bearer ${$i.token}`);
 			xhr.onload = (ev) => {
 				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
 					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい