整理store。

package.json

@@ -15,6 +15,7 @@
     "http-proxy-middleware": "^2.0.6",
     "md5": "^2.3.0",
     "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.7",
     "react-router-dom": "^6.11.2",

src/App.js

@@ -1,14 +1,16 @@
 import './App.css';
-import { Routes, Route, Redirect } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { useCookies } from 'react-cookie';
 import LoginPage from './LoginPage';
 import MainPage from './MainPage';
 
 function App() {
+  const [cookies] = useCookies(['accessToken']);
   return (
     <div className="App">
       <Routes>
+        <Route exact path="/" element={cookies.accessToken ? <MainPage /> : <Navigate to="/login" />} />
         <Route exact path="/login" element={<LoginPage />} />
-        <Route exact path="/" element={<MainPage />} />
       </Routes>
     </div>
   );

src/LoginPage.js

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import yzs from "./business/request.js";
 import styles from './LoginPage.module.css';
 import { useSelector, useDispatch } from 'react-redux'
-import { setAddress } from "./business/ipSlice.js"
+import { setUdid, setFlushToken, setAccessToken, setUserInfo } from "./business/userSlice.js"
-import { setFlushToken, setAccessToken, setUserInfo, selectFlushToken } from "./business/userSlice.js"
+import { setList } from "./business/recorderSlice.js"
 import logo from './assets/logo.png'; // Tell webpack this JS file uses this image
 import { Container, Tab, Box } from '@mui/material';
 import TabPanel from '@mui/lab/TabPanel';
@@ -13,7 +12,7 @@ import { TabList } from '@mui/lab';
 import TabContext from '@mui/lab/TabContext';
 import DynamicCodeForm from './components/DynamicCodeForm.js';
 import PasswordForm from './components/PasswordForm.js';
-
+import { useCookies } from 'react-cookie';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const theme = createTheme({
@@ -33,17 +32,20 @@ const theme = createTheme({
 });
 
 export default function () {
+    const [cookies, setCookie] = useCookies(['accessToken']);
     const [value, setValue] = useState("1");
-    const [username, setUsername] = useState('');
+    const account = useSelector(state => state.user.account)
-    const [password, setPassword] = useState('');
+    const password = useSelector(state => state.user.password)
 
     const handleChange = (event, newValue) => {
         setValue(newValue);
     };
 
+    const accessToken = useSelector(state => state.user.accessToken)
+    const flushToken = useSelector(state => state.user.flushToken)
+    const udid = useSelector(state => state.user.udid)
+
 
-    const ip = useSelector(state => state.ip.value)
-    const flushToken = useSelector(selectFlushToken)
     const dispatch = useDispatch()
 
     const getIp = async () => {
@@ -51,7 +53,7 @@ export default function () {
         const response = await fetch("https://ipapi.co/json/")
         const data = await response.json()
         // Set the IP address to the constant `ip`
-        dispatch(setAddress(data.ip));
+        dispatch(setUdid(data.ip));
     }
 
     // Run `getIP` function above just once when the page is rendered
@@ -60,27 +62,26 @@ export default function () {
     }, [])
 
 
-
+    const debug_test = () => {
-    const handleInputChange = (event) => {
+        console.log("accessToken", accessToken);
-        const { name, value } = event.target;
+    }
-        if (name === 'username') setUsername(value);
-        if (name === 'password') setPassword(value);
-    };
-
     const handleSubmit = (event) => {
         event.preventDefault();
-        console.log(`Username: ${username}\nPassword: ${password}  ip: ${ip}`);
+        console.log(`account: ${account}\nPassword: ${password}  udid: ${udid}`);
 
-        yzs.login(ip.payload).then(token => {
+        yzs.login(udid, account, password).then(token => {
             dispatch(setFlushToken(token));
-            yzs.get_access_token(ip.payload, token).then(token => {
+            yzs.get_access_token(udid, token).then(token => {
                 // yzs.update_access_token(ip.payload, token);
                 dispatch(setAccessToken(token));
-                yzs.get_user_info(ip.payload, token).then(info => {
+                setCookie("accessToken", token)
+                yzs.get_user_info(udid, token).then(info => {
                     dispatch(setUserInfo(info));
                     let passportId = info.passportId;
-                    yzs.user_select(ip.payload, token).then(info => {
+                    yzs.user_select(udid, token).then(info => {
-                        yzs.get_record_list(token, passportId)
+                        yzs.get_record_list(token, passportId).then(list => {
+                            dispatch(setList(list.result));
+                        });
                     })
 
                 });
@@ -136,6 +137,7 @@ export default function () {
 
                     </Container>
                 </ThemeProvider >
+                <Button variant="contained" onClick={debug_test}>测试</Button>
             </div>
 
 

src/business/ipSlice.js

@@ -1,22 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export const ipSlice = createSlice({
-    name: 'ip',
-    initialState: {
-        value: ""
-    },
-    reducers: {
-        setAddress: (state, ip) => {
-            // Redux Toolkit allows us to write "mutating" logic in reducers. It
-            // doesn't actually mutate the state because it uses the Immer library,
-            // which detects changes to a "draft state" and produces a brand new
-            // immutable state based off those changes
-            state.value = ip;
-        },
-    }
-})
-
-// Action creators are generated for each case reducer function
-export const { setAddress } = ipSlice.actions
-
-export default ipSlice.reducer

src/business/recorderSlice.js

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const recorderSlice = createSlice({
+    name: 'user',
+    initialState: {
+        list: [],
+    },
+    reducers: {
+        setList: (state, action) => {
+            state.list = action.payload;
+        }
+    }
+})
+
+// Action creators are generated for each case reducer function
+export const { setList } = recorderSlice.actions
+
+export default recorderSlice.reducer

src/business/request.js

@@ -129,23 +129,21 @@ const yzs = {
                 'timestamp': timestamp,
                 'signature': sig,
             },
-        }).then(response => {
+        }).then(response => response.json()
-            console.log(response);
+        ).then((json) => {
-            response.text()
-        }).then((json) => {
             console.log(json)
             return json;
         });
     },
 
-    login: function (ip) {
+    login: function (udid, account, password) {
         let md5 = require('md5');
         let body = {};
         body.subsystemId = 16;
-        body.clientId = ip;
+        body.clientId = udid;
         body.timestamp = parseInt(new Date().getTime() / 1000);
-        body.account = "13682423271";
+        body.account = account;
-        body.password = md5("yzs123456");
+        body.password = md5(password);
 
         return fetch("http://116.198.37.53:8080/rest/v2/user/login", {
             method: "POST",

src/business/store.js

@@ -1,10 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit'
-import ipReducer from "./ipSlice.js"
 import userReducer from "./userSlice.js"
+import recorderReducer from "./recorderSlice.js";
 
 export default configureStore({
     reducer: {
-        ip: ipReducer,
         user: userReducer,
+        recorder: recorderReducer,
     }
 })

src/business/userSlice.js

@@ -3,31 +3,49 @@ import { createSlice } from '@reduxjs/toolkit'
 export const userSlice = createSlice({
     name: 'user',
     initialState: {
+        udid: "",    // web端使用ip地址作为udid
         flushToken: "",
         accessToken: "",
-        info: {},
+        passportId: 0,
+        createTime: "",
+        userName: "",
+        agreeAgreement: true,
+        account: "13682423271",
+        password: "yzs123456",
+        verificationCode: "",
     },
     reducers: {
+        setUdid: (state, action) => {
+            state.udid = action.payload;
+        },
         setFlushToken: (state, token) => {
             // Redux Toolkit allows us to write "mutating" logic in reducers. It
             // doesn't actually mutate the state because it uses the Immer library,
             // which detects changes to a "draft state" and produces a brand new
             // immutable state based off those changes
-            state.flushToken = token;
+            state.flushToken = token.payload;
         },
         setAccessToken: (state, token) => {
-            state.accessToken = token;
+            state.accessToken = token.payload;
         },
         setUserInfo: (state, info) => {
-            state.info = info;
+            state.passportId = info.payload.passportId
-            // state.createTime = info.createTime;
+            state.createTime = info.payload.createTime
-            // state.userName = info.userName;
+            state.userName = info.payload.userName
+        },
+        setAccount: (state, action) => {
+            state.account = action.payload;
+        },
+        setPassword: (state, action) => {
+            state.password = action.payload;
+        },
+        setVerificationCode: (state, action) => {
+            state.verificationCode = action.payload;
         },
     }
 })
 
 // Action creators are generated for each case reducer function
-export const { setFlushToken, setAccessToken, setUserInfo } = userSlice.actions
+export const { setUdid, setFlushToken, setAccessToken, setUserInfo, setAccount, setPassword, setVerificationCode } = userSlice.actions
-export const selectFlushToken = (state) => state.user.flushToken
 
 export default userSlice.reducer

src/components/DynamicCodeForm.js

@@ -3,16 +3,18 @@ import { CheckBox } from '@mui/icons-material';
 import React, { useState } from 'react';
 import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
 import LockIcon from '@mui/icons-material/Lock';
+import { useSelector, useDispatch } from 'react-redux'
+import { setAccount, setVerificationCode } from "../business/userSlice.js"
 
 export default function () {
-    const [username, setUsername] = useState('');
+    const dispatch = useDispatch();
-    const [password, setPassword] = useState('');
+    const account = useSelector(state => state.user.account)
+    const verificationCode = useSelector(state => state.user.verificationCode)
 
     const handleInputChange = (event) => {
         const { name, value } = event.target;
-        if (name === 'username') setUsername(value);
+        if (name === 'username') dispatch(setAccount(value));
-        if (name === 'password') setPassword(value);
+        if (name === 'password') dispatch(setVerificationCode(value));
-
     };
 
     return <Container disableGutters={true}
@@ -26,7 +28,7 @@ export default function () {
             name="username"
             label="请输入手机号码"
             variant="outlined"
-            value={username}
+            value={account}
             color="primary"
             fullWidth
             onChange={handleInputChange}
@@ -46,7 +48,7 @@ export default function () {
             label="请输入验证码"
             type="password"
             variant="outlined"
-            value={password}
+            value={verificationCode}
             onChange={handleInputChange}
             InputProps={{
                 startAdornment: (

src/components/PasswordForm.js

@@ -2,16 +2,17 @@ import React, { useState } from 'react';
 import { Container, TextField, Button, InputAdornment } from "@mui/material";
 import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
 import LockIcon from '@mui/icons-material/Lock';
+import { useSelector, useDispatch } from 'react-redux'
+import { setAccount, setPassword } from "../business/userSlice.js"
 
 export default function () {
-    const [username, setUsername] = useState('');
+    const dispatch = useDispatch();
-    const [password, setPassword] = useState('');
+    const account = useSelector(state => state.user.account)
-
+    const password = useSelector(state => state.user.password)
     const handleInputChange = (event) => {
         const { name, value } = event.target;
-        if (name === 'username') setUsername(value);
+        if (name === 'username') dispatch(setAccount(value));
-        if (name === 'password') setPassword(value);
+        if (name === 'password') dispatch(setPassword(value));
-
     };
 
     return <Container disableGutters={true}
@@ -24,7 +25,7 @@ export default function () {
             name="username"
             label="请输入手机号码"
             variant="outlined"
-            value={username}
+            value={account}
             fullWidth
             onChange={handleInputChange}
             InputProps={{

src/index.js

@@ -6,14 +6,17 @@ import store from './business/store';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
+import { CookiesProvider } from 'react-cookie';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <Provider store={store}>
+      <CookiesProvider>
         <BrowserRouter >
           <App />
         </BrowserRouter>
+      </CookiesProvider>
     </Provider>
   </React.StrictMode>
 );