Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Auth client/#62 #75

Merged
merged 6 commits into from
Apr 15, 2024
Merged

Auth client/#62 #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
93e5118
feat: Add failure handler for unauthorized requests
seonghunYang Apr 13, 2024
7206911
feat: Add protected page component
seonghunYang Apr 13, 2024
70e5a45
feat: Add global error component
seonghunYang Apr 13, 2024
8823521
feat: Add error component for handling unauthorized access and displa…
seonghunYang Apr 13, 2024
b5bdc13
refactor: Refactor trigger function to remove export
seonghunYang Apr 13, 2024
5e0da04
fix: Update API request to disable caching and fix function return type
seonghunYang Apr 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions app/(sub-page)/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
'use client';
import { useEffect } from 'react';
import Link from 'next/link';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
useEffect(() => {
console.error(error);
}, [error]);

if (error.message === 'Unauthorized') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

message둜 ꡬ뢄을 ν•˜λŠ”λ°, λ°±μ—”λ“œμ—μ„œ μ—λŸ¬ μ‹œ messageλ₯Ό 보내주고 μžˆμ§€ μ•Šμ€ μƒνƒœμž…λ‹ˆλ‹€.
이에 λŒ€ν•΄μ„œ λ°±μ—”λ“œν•œν…Œ μž¬μš”μ²­μ„ ν• κΉŒμš”?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • μ—¬κΈ°μ„œ μ–ΈκΈ‰ν•˜λŠ” 'message'λŠ” httpErrorHandler ν•¨μˆ˜λ₯Ό 톡해 μž‘λŠ” μ„œλΈŒν΄λž˜μŠ€ν™”λœ μ—λŸ¬λ₯Ό μ˜λ―Έν•˜λ©°, μ΄λŠ” λ°±μ—”λ“œμ—μ„œ λ³΄λ‚΄λŠ” 'message'와 차이가 μžˆμŠ΅λ‹ˆλ‹€.
  • λ°±μ—”λ“œμ˜ μƒνƒœ μ½”λ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ μ—λŸ¬λ₯Ό 각 κ²½μš°μ— 맞게 μ„œλΈŒν΄λž˜μŠ€ν™”ν•˜λ©°, 이 κ³Όμ •μ—μ„œ 'message'λ₯Ό μž…λ ₯ν•˜λ―€λ‘œ λ°±μ—”λ“œμ— μž¬μš”μ²­ν•  ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.
  • λ²ˆμ™Έλ‘œ λ°±μ—”λ“œμ—μ„œ μ—λŸ¬ μ½”λ“œκ°€ 생긴닀면, μœ„μ—μ„œ λ§ν•œ 이슈 떄문에 message에 ν•΄λ‹Ή μ—λŸ¬ μ½”λ“œλ₯Ό λ„£μ–΄μ•Ό κ² λ‹€λŠ” 생각이 λ“œλ„€μš”.

return (
<div>
<h2>Unauthorized</h2>
<Link href="/sign-in">to Login</Link>
</div>
);
}

return (
<div>
<h2>Something went wrong!!!!!</h2>
<button
onClick={
// μ„Έκ·Έλ¨ΌνŠΈλ₯Ό 재 λ Œλ”λ§ ν•˜μ—¬ 볡ꡬλ₯Ό μ‹œλ„ν•©λ‹ˆλ‹€.
() => reset()
}
>
Try again
</button>
</div>
);
}
15 changes: 15 additions & 0 deletions app/(sub-page)/protected/page.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ν•΄λ‹Ή νŽ˜μ΄μ§€λŠ” μ–Έμ œ 호좜이 되고 μ–΄λŠ 역할을 ν•˜λŠ”μ§€ μΆ”κ°€λ‘œ μ„€λͺ…을 ν•΄μ£Όμ‹€ 수 μžˆμ„κΉŒμš”?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 κΆκΈˆν•©λ‹ˆλ‹€ !
μ œκ°€ μ˜ˆμƒν•˜κΈ°μ—λŠ” protected νŽ˜μ΄μ§€λ‘œ κ°€κ²Œλ˜λ©΄ 무쑰건 401을 λ°˜ν™˜ν•˜λ‹ˆκΉŒ error.tsxκ°€ ν˜ΈμΆœν•˜κ³  이 λ‘œμ§μ„ 보기 μœ„ν•΄μ„œ protected νŽ˜μ΄μ§€λ₯Ό λ§Œλ“  것 같은데 λ§žμ„κΉŒμš”?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 이 νŽ˜μ΄μ§€λŠ” 인증 κ΄€λ ¨ μ—λŸ¬ 처리 둜직이 μ •μƒμ μœΌλ‘œ μž‘λ™ν•˜λŠ”μ§€ ν…ŒμŠ€νŠΈν•˜κΈ° μœ„ν•΄ λ§Œλ“  κ°œλ°œμš©μž…λ‹ˆλ‹€. 주석에 기둝해두어야 ν–ˆλŠ”λ°, λΉ νŠΈλ Έλ„€μš”. λ―Έμ•ˆν•©λ‹ˆλ‹€

Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { API_PATH } from '@/app/business/api-path';
import { httpErrorHandler } from '@/app/utils/http/http-error-handler';

async function trigger() {
const response = await fetch(`${API_PATH.auth}/failure`, {
cache: 'no-store',
});
const result = await response.json();
httpErrorHandler(response, result);
}

export default async function ProtectedPage() {
const data = await trigger();
return <div>Auth protected</div>;
}
2 changes: 1 addition & 1 deletion app/business/user/user.command.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { cookies } from 'next/headers';
import { isValidation } from '@/app/utils/zod/validation.util';
import { redirect } from 'next/navigation';

export async function validateToken(): Promise<ValidateTokenResponse | boolean> {
export async function validateToken(): Promise<ValidateTokenResponse | false> {
const accessToken = cookies().get('accessToken')?.value;
const refreshToken = cookies().get('refreshToken')?.value;
try {
Expand Down
27 changes: 27 additions & 0 deletions app/global-error.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

global-errorλŠ” ν”„λ‘œλ•μ…˜μ—μ„œλ§Œ ν™œμ„±ν™”λ˜μ–΄ sub-page의 errorμ—μ„œ ν•΄λ‹Ή 처리λ₯Ό μ§„ν–‰ν•˜λŠ” κ²ƒμœΌλ‘œ μ΄ν•΄ν–ˆλŠ”λ°, ν•΄λ‹Ή νŒŒμΌμ€ μ–΄λ–»κ²Œ μ‚¬μš©λ  μ˜ˆμ •μΈκ°€μš”? μΆ”ν›„ 변경을 μ˜ˆμƒν•˜μ‹œλ‚˜μš”?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ν”„λ‘œλ•μ…˜μ—μ„œλŠ” global-errorμ—μ„œ μ—λŸ¬λ₯Ό μ²˜λ¦¬ν•˜λŠ” 것이 μ’‹κ² λ‹€λŠ” 생각이 μžˆμŠ΅λ‹ˆλ‹€. λ§μ”€ν•˜μ‹ λŒ€λ‘œ 개발 κ³Όμ •μ—μ„œλŠ” sub-pageμ—μ„œ μ—λŸ¬ 처리λ₯Ό μ§„ν–‰ν•˜μ§€λ§Œ, 배포 직전에 인증관련 μ—λŸ¬ μ²˜λ¦¬λŠ” global-errorμ—μ„œ μž‘λ™ν•˜λ„λ‘ μˆ˜μ •ν•  κ³„νšμž…λ‹ˆλ‹€.

Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
'use client';
import { useEffect } from 'react';

// https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-errors-in-root-layouts
// global-errorλŠ” ν”„λ‘œλ•μ…˜μ—μ„œλ§Œ ν™œμ„±ν™”
export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
useEffect(() => {
// Log the error to an error reporting service
console.error(error);
}, [error]);

return (
<html>
<body>
<h2>Something went wrong!!!!!</h2>
<button
onClick={
// μ„Έκ·Έλ¨ΌνŠΈλ₯Ό 재 λ Œλ”λ§ ν•˜μ—¬ 볡ꡬλ₯Ό μ‹œλ„ν•©λ‹ˆλ‹€.
() => reset()
}
>
Try again
</button>
</body>
</html>
);
}
4 changes: 4 additions & 0 deletions app/mocks/handlers/user-handler.mock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ function mockDecryptToken(token: string) {
}

export const userHandlers = [
http.get<never, never, never>(`${API_PATH.auth}/failure`, async ({ request }) => {
await delay(500);
return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
}),
http.post<never, never, ValidateTokenResponse>(`${API_PATH.auth}/token`, async ({ request }) => {
return HttpResponse.json({
accessToken: 'fake-access-token',
Expand Down
4 changes: 2 additions & 2 deletions app/ui/view/molecule/list/swipeable-custom-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { ReactNode } from 'react';
import { ListRow } from './list-root';
import { SwipeableList, Type as ListType } from 'react-swipeable-list';
// import { SwipeableList, Type as ListType } from 'react-swipeable-list';

interface SwipeableListProps<T extends ListRow> {
data: T[];
Expand All @@ -10,7 +10,7 @@ interface SwipeableListProps<T extends ListRow> {
export default function SwipeableCustomList<T extends ListRow>({ data, render }: SwipeableListProps<T>) {
return (
<div className="rounded-xl border-[1px] border-gray-300 w-full ">
<SwipeableList type={ListType.IOS}>{data.map((item, index) => render(item, index))}</SwipeableList>
{/* <SwipeableList type={ListType.IOS}>{data.map((item, index) => render(item, index))}</SwipeableList> */}
</div>
);
}
2 changes: 1 addition & 1 deletion app/ui/view/molecule/table/table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const SwipeableLectureTable: StoryObj = {
credit: 3,
},
];
const actionButton = () => <DeleteTakenLectureButton lectureId={3} handleDelete={() => {}} />;
const actionButton = () => <DeleteTakenLectureButton lectureId={3} onDelete={() => {}} />;
return (
<main>
<Table
Expand Down
Loading