PullRequest: 505 feat: manage login state with local storage updates for password-free login

Author: obdev

frontend/src/model/profile.js

@@ -82,6 +82,7 @@ const model = {
       });
 
       setEncryptLocalStorage('password', '');
+      setEncryptLocalStorage('login', 'false');
       history.push('/login');
     },
   },

frontend/src/page/Layout/index.tsx

@@ -29,6 +29,7 @@ import GlobalStyle from './GlobalStyle';
 import { getEncryptLocalStorage, setEncryptLocalStorage } from '@/util';
 import { getStatistics } from '@/service/obshell/ob';
 import { telemetryReport } from '@/service/custom';
+import * as obService from '@/service/obshell/ob';
 import moment from 'moment';
 
 interface LayoutProps {
@@ -71,8 +72,14 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
     },
   });
 
+  // 用来触发非免密场景下空密码 401 跳到登录页
+  useRequest(obService.getObInfo, {
+    ready: !isPasswordFreeLogin,
+  });
+
   const telemetryTime = getEncryptLocalStorage('telemetryTime');
   const isTelemetryOutdated = !telemetryTime || moment().diff(moment(telemetryTime), 'hours') >= 1;
+  const isLogin = getEncryptLocalStorage('login') === 'true';
 
   useRequest(
     () =>
@@ -83,7 +90,9 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
       ready:
         isTelemetryOutdated &&
         // 如果是免密登录场景，获取到 secret 后在进行 statistics 请求，避免 401 错误
-        (isPasswordFreeLogin ? !loading : true),
+        (isPasswordFreeLogin ? !loading : isLogin),
+      // 登录状态变化后，重新发起请求，避免首次失败后不再发起请求
+      refreshDeps: [isLogin],
       // 一小时 + 5秒 轮训一次。5s 是为了避免请求 telemetry 接口时 ，时间差(telemetryTime 判断)导致的请求失败
       pollingInterval: 1000 * 60 * 60 + 5000,
       onSuccess: res => {

frontend/src/page/Login/index.tsx

@@ -89,6 +89,7 @@ const LoginPage: React.FC<LoginPageProps> = ({
     });
 
     setEncryptLocalStorage('password', password);
+    setEncryptLocalStorage('login', 'true');
     getObInfo();
   };
 

frontend/src/util/request.js

@@ -30,7 +30,7 @@ import encrypt from '@/util/encrypt';
 import { aesEncrypt } from '@/util/aes';
 import { cloneDeep } from 'lodash';
 import queryString from 'query-string';
-import { getEncryptLocalStorage } from '@/util';
+import { getEncryptLocalStorage, setEncryptLocalStorage } from '@/util';
 
 const statusCodeMessage = {
   400: formatMessage({
@@ -172,6 +172,8 @@ const errorHandler = ({ request, response, data }) => {
   const { status } = response || {};
   // 401 状态为未登录情况，不展示接口错误信息，直接跳转登录页，因此需要单独处理
   if (status === 401) {
+    setEncryptLocalStorage('login', 'false');
+
     // 未登录状态，清空 tracert 的用户标识
     // tracert.set({
     //   roleId: null,