feat: add initilized to auth component

src/app/services/auth.js

@@ -1,7 +1,12 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { nanoid } from "@reduxjs/toolkit";
 import baseQuery from "./base.query";
-import { setAuthData, updateToken, resetAuthData } from "../slices/auth.data";
+import {
+  setAuthData,
+  updateToken,
+  resetAuthData,
+  updateInitilize,
+} from "../slices/auth.data";
 import BASE_URL, { KEY_DEVICE_KEY } from "../config";
 const getDeviceId = () => {
   let d = localStorage.getItem(KEY_DEVICE_KEY);
@@ -129,10 +134,24 @@ export const authApi = createApi({
         }
       },
     }),
+    getInitialized: builder.query({
+      query: () => ({
+        url: `/admin/system/initialized`,
+      }),
+      async onQueryStarted(params, { dispatch, queryFulfilled }) {
+        try {
+          const { data: isInitized } = await queryFulfilled;
+          dispatch(updateInitilize(isInitized));
+        } catch {
+          console.log("api initialized error");
+        }
+      },
+    }),
   }),
 });
 
 export const {
+  useGetInitializedQuery,
   useSendMagicLinkMutation,
   useGetCredentialsQuery,
   useUpdateDeviceTokenMutation,

src/app/slices/auth.data.js

@@ -7,12 +7,14 @@ import {
   KEY_EXPIRE,
 } from "../config";
 const initialState = {
+  initialized: true,
   uid: null,
   token: localStorage.getItem(KEY_TOKEN),
   expireTime: localStorage.getItem(KEY_EXPIRE) || new Date().getTime(),
   refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN),
 };
 const emptyState = {
+  initialized: true,
   uid: null,
   token: null,
   expireTime: new Date().getTime(),
@@ -24,11 +26,13 @@ const authDataSlice = createSlice({
   reducers: {
     setAuthData(state, action) {
       const {
+        initialized = true,
         user: { uid },
         token,
         refresh_token,
         expired_in = 0,
       } = action.payload;
+      state.initialized = initialized;
       state.uid = uid;
       state.token = token;
       state.refreshToken = refresh_token;
@@ -58,6 +62,10 @@ const authDataSlice = createSlice({
       state.uid = uid;
       console.log("set uid orginal");
     },
+    updateInitilize(state, action) {
+      const isInitized = action.payload;
+      state.initialized = isInitized;
+    },
     updateToken(state, action) {
       const { token, refresh_token, expired_in } = action.payload;
       console.log("refresh token");
@@ -72,6 +80,7 @@ const authDataSlice = createSlice({
   },
 });
 export const {
+  updateInitilize,
   setAuthData,
   resetAuthData,
   setUid,

src/common/component/RequireAuth.js

@@ -1,9 +1,13 @@
 // import React from 'react'
-import { Navigate } from 'react-router-dom';
+import { Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { useGetInitializedQuery } from "../../app/services/auth";
 
-import { useSelector } from 'react-redux';
+export default function RequireAuth({ children, redirectTo = "/login" }) {
-
+  const { isLoading } = useGetInitializedQuery();
-export default function RequireAuth({ children, redirectTo = '/login' }) {
+  const { token, initialized } = useSelector((store) => store.authData);
- const { token } = useSelector((store) => store.authData);
+  if (isLoading) return null;
- return token ? children : <Navigate to={redirectTo} replace />;
+  //  未初始化 则先走setup 流程
+  if (!initialized) return <Navigate to={`/onboarding`} replace />;
+  return token ? children : <Navigate to={redirectTo} replace />;
 }