Feat: If the user is not logged in, jump to the login page by refreshing. (#5451)

### What problem does this PR solve?

Feat: If the user is not logged in, jump to the login page by
refreshing.
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/login-hooks.ts

@@ -1,12 +1,11 @@
 import { Authorization } from '@/constants/authorization';
 import userService from '@/services/user-service';
-import authorizationUtil from '@/utils/authorization-util';
+import authorizationUtil, { redirectToLogin } from '@/utils/authorization-util';
 import { useMutation } from '@tanstack/react-query';
 import { Form, message } from 'antd';
 import { FormInstance } from 'antd/lib';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { history } from 'umi';
 
 export interface ILoginRequestBody {
   email: string;
@@ -89,7 +88,7 @@ export const useLogout = () => {
       if (data.code === 0) {
         message.success(t('message.logout'));
         authorizationUtil.removeAll();
-        history.push('/login');
+        redirectToLogin();
       }
       return data.code;
     },

web/src/locales/en.ts

@@ -714,7 +714,7 @@ This auto-tag feature enhances retrieval by adding another layer of domain-speci
       202: 'A request has been queued in the background (asynchronous task).',
       204: 'Data deleted successfully.',
       400: 'There was an error in the request issued, and the server did not create or modify data.',
-      401: 'The user does not have permissions (wrong token, username, password).',
+      401: 'Please sign in again.',
       403: 'The user is authorized, but access is prohibited.',
       404: 'The request was made for a record that does not exist, and the server did not perform the operation.',
       406: 'The requested format is not available.',

web/src/locales/zh-traditional.ts

@@ -681,7 +681,7 @@ export default {
       202: '一個請求已經進入後台排隊（異步任務）。',
       204: '刪除數據成功。',
       400: '發出的請求有錯誤，服務器沒有進行新建或修改數據的操作。',
-      401: '用戶沒有權限（Token、用戶名、密碼錯誤）。',
+      401: '請重新登入。',
       403: '用戶得到授權，但是訪問是被禁止的。',
       404: '發出的請求針對的是不存在的記錄，服務器沒有進行操作。',
       406: '請求的格式不可得。',

web/src/locales/zh.ts

@@ -699,7 +699,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       202: '一个请求已经进入后台排队（异步任务）。',
       204: '删除数据成功。',
       400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
-      401: '用户没有权限（Token、用户名、密码错误）。',
+      401: '请重新登录。',
       403: '用户得到授权，但是访问是被禁止的。',
       404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
       406: '请求的格式不可得。',

web/src/utils/authorization-util.ts

@@ -56,3 +56,8 @@ export const getAuthorization = () => {
 };
 
 export default storage;
+
+// Will not jump to the login page
+export function redirectToLogin() {
+  window.location.href = location.origin + `/login`;
+}

web/src/utils/request.ts

@@ -3,9 +3,9 @@ import { ResponseType } from '@/interfaces/database/base';
 import i18n from '@/locales/config';
 import authorizationUtil, {
   getAuthorization,
+  redirectToLogin,
 } from '@/utils/authorization-util';
 import { message, notification } from 'antd';
-import { history } from 'umi';
 import { RequestMethod, extend } from 'umi-request';
 import { convertTheKeysOfTheObjectToSnake } from './common-util';
 
@@ -117,7 +117,7 @@ request.interceptors.response.use(async (response: Response, options) => {
       duration: 3,
     });
     authorizationUtil.removeAll();
-    history.push('/login'); // Will not jump to the login page
+    redirectToLogin();
   } else if (data?.code !== 0) {
     notification.error({
       message: `${i18n.t('message.hint')} : ${data?.code}`,

web/src/wrappers/auth.tsx

@@ -1,12 +1,13 @@
 import { useAuth } from '@/hooks/auth-hooks';
-import { Navigate, Outlet } from 'umi';
+import { redirectToLogin } from '@/utils/authorization-util';
+import { Outlet } from 'umi';
 
 export default () => {
   const { isLogin } = useAuth();
   if (isLogin === true) {
     return <Outlet />;
   } else if (isLogin === false) {
-    return <Navigate to="/login" />;
+    redirectToLogin();
   }
 
   return <></>;