fix: token expires (daodaoedu#51)

JohnsonMao · Jul 21, 2024 · 189f606 · 189f606
1 parent 432f259
commit 189f606
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/hooks/useFetch.jsx b/hooks/useFetch.jsx
@@ -1,9 +1,13 @@
 import { useEffect, useReducer, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useRouter } from 'next/navigation';
 import { BASE_URL } from '@/constants/common';
+import { userLogout } from '@/redux/actions/user';
 
 const useFetch = (url, { enabled = true, initialValue, onSuccess } = {}) => {
   const { token } = useSelector((state) => state.user);
+  const dispatch = useDispatch();
+  const router = useRouter();
   const [render, refetch] = useReducer((pre) => !pre, true);
   const [data, setData] = useState(initialValue);
   const [isFetching, setIsFetching] = useState(enabled);
@@ -24,7 +28,14 @@ const useFetch = (url, { enabled = true, initialValue, onSuccess } = {}) => {
     setIsError(false);
 
     fetch(endpoint, requestData)
-      .then((res) => res.json())
+      .then((res) => {
+        if (res.status < 300) return res.json();
+        if (res.status === 401) {
+          dispatch(userLogout());
+          router.replace('/login')
+        }
+        throw res;
+      })
       .then((json) => pass && setData(json))
       .catch(() => setIsError(true))
       .finally(() => setIsFetching(false));

diff --git a/hooks/useMutation.jsx b/hooks/useMutation.jsx
@@ -1,9 +1,13 @@
 import { useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useRouter } from 'next/navigation';
 import { BASE_URL } from '@/constants/common';
+import { userLogout } from '@/redux/actions/user';
 
 const useMutation = (url, { method, onSuccess, onError } = {}) => {
   const { token } = useSelector((state) => state.user);
+  const dispatch = useDispatch();
+  const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
@@ -23,7 +27,14 @@ const useMutation = (url, { method, onSuccess, onError } = {}) => {
     setIsError(false);
 
     fetch(endpoint, requestData)
-      .then((res) => res.json())
+      .then((res) => {
+        if (res.status < 300) return res.json();
+        if (res.status === 401) {
+          dispatch(userLogout());
+          router.replace('/login')
+        }
+        throw res;
+      })
       .then(onSuccess)
       .catch((e) => {
         onError(e);

diff --git a/pages/group/edit/index.jsx b/pages/group/edit/index.jsx
@@ -36,7 +36,7 @@ function EditGroupPage() {
 
   const goToDetail = () => router.replace(`/group/detail?id=${id}`);
 
-  const { mutate, isLoading } = useMutation(`/activity${id}`, {
+  const { mutate, isLoading } = useMutation(`/activity/${id}`, {
     method: 'PUT',
     onSuccess: () => {
       pushSnackbar({ message: '已發布修改' });