fix(store): 🐛 user

- 修复登录按钮需要按两次才能进入页面

- 修复未登录不正常跳转登录页面

src/App.tsx

@@ -24,7 +24,7 @@ function App() {
     }),
     shallowEqual,
   );
-  const { userInfo } = useAppSelector((state) => state.userInfo);
+  const { userInfo } = useAppSelector((state) => state.user);
   const asyncRouter = useAppSelector((state) => state.route.asyncRouter);
 
   const getLocale = useMemo(() => {

src/layout/Authority/index.tsx

@@ -6,9 +6,9 @@ interface AuthorityType {
 }
 
 const Authority = ({ children }: AuthorityType) => {
-  const userInfo = useAppSelector((state) => state.userInfo);
+  const user = useAppSelector((state) => state.user);
 
-  if (!userInfo) return <Navigate to="/login" />;
+  if (!user?.power) return <Navigate to="/login" />;
 
   return <>{children}</>;
 };

src/layout/components/AppAccount/index.tsx

@@ -4,10 +4,14 @@ import { useNavigate } from 'react-router-dom';
 import { getAccountStyle } from './style';
 import avatar from '@/assets/avatar.png';
 import { removeStorage } from '@/utils/storage';
+import { setSignOut } from '@/store/modules/user';
+import { useAppDispatch } from '@/store/hooks';
 
 const AppAccount = () => {
   const { AccountDiv } = getAccountStyle();
 
+  const dispatch = useAppDispatch();
+
   const navigate = useNavigate();
 
   const items: MenuProps['items'] = [
@@ -19,6 +23,8 @@ const AppAccount = () => {
 
   const memuChange: MenuProps['onClick'] = (_e) => {
     removeStorage('userInfo');
+    dispatch(setSignOut());
+
     navigate('/login');
   };
 

src/store/index.ts

@@ -13,19 +13,19 @@ import storage from 'redux-persist/lib/storage';
 // import thunk from 'redux-thunk';
 import appReducer from './modules/app';
 import routeReducer from './modules/route';
-import userInfoReducer from './modules/userInfo';
+import userReducer from './modules/user';
 
 const reducers = combineReducers({
   app: appReducer,
   route: routeReducer,
-  userInfo: userInfoReducer,
+  user: userReducer,
 });
 
 const persistConfig = {
   key: 'react-xs',
   storage,
   // 白名单
-  whitelist: ['app', 'route', 'userInfo'],
+  whitelist: ['app', 'route', 'user'],
   // 黑名单
   blacklist: [],
 };

src/store/modules/user.ts

@@ -0,0 +1,36 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import type { UseInfoType } from '@/server/useInfo';
+
+interface UserSlice {
+  userInfo?: UseInfoType;
+  power?: UseInfoType['power'];
+}
+
+const initialState: UserSlice = {};
+
+export const UserSlice = createSlice({
+  name: 'userInfo',
+  initialState,
+  reducers: {
+    setUserInfo: (state, action: PayloadAction<UseInfoType>) => {
+      console.log(action.payload);
+      state.userInfo = action.payload;
+      state.power = action.payload.power;
+    },
+    setPower: (state, action: PayloadAction<UseInfoType['power']>) => {
+      state.power = action.payload;
+      if (state.userInfo) {
+        state.userInfo.power = action.payload;
+      }
+    },
+    setSignOut: (state) => {
+      delete state.userInfo;
+      delete state.power;
+    },
+  },
+});
+
+export const { setUserInfo, setPower, setSignOut } = UserSlice.actions;
+
+export default UserSlice.reducer;

src/views/Login/index.tsx

@@ -1,5 +1,5 @@
 import { Button, theme } from 'antd';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import SvgIcon from '@/components/SvgIcon';
@@ -9,11 +9,12 @@ import AppLocale from '@/components/AppLocale';
 import { addClass, removeClass } from '@/utils/operate';
 import { getUserInfo } from '@/server/useInfo';
 import { initAsyncRoute } from '@/router/utils';
-import { useAppDispatch } from '@/store/hooks';
-import { setUserInfo } from '@/store/modules/userInfo';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setUserInfo } from '@/store/modules/user';
 
 const Login = memo(() => {
   const thme = theme.useToken();
+  const userStore = useAppSelector((state) => state.user);
 
   const [user, setUser] = useState<string>('');
   const [pwd, setPwd] = useState<string>('');
@@ -27,10 +28,15 @@ const Login = memo(() => {
     if (res.code === 1) {
       await initAsyncRoute(res.data.power);
       dispatch(setUserInfo(res.data));
-      navigate('/home');
     }
   };
 
+  useEffect(() => {
+    if (userStore.power) {
+      navigate('/home');
+    }
+  }, [userStore]);
+
   function onUserFocus() {
     addClass(document.querySelector('.user'), 'focus');
   }

src/views/Power/Permissions/index.tsx

@@ -1,12 +1,12 @@
 import { Button } from 'antd';
 import { initAsyncRoute } from '@/router/utils';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { setPower } from '@/store/modules/userInfo';
+import { setPower } from '@/store/modules/user';
 
 const Permissions = () => {
   const dispatch = useAppDispatch();
 
-  const power = useAppSelector((state) => state.userInfo.power);
+  const power = useAppSelector((state) => state.user.power);
 
   const setCount = async () => {
     const newPower = power === 'admin' ? 'test' : 'admin';