@yyp92-cli/template-react-pc 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @yyp92-cli/template-react-pc
 
+## 1.5.0
+
+### Minor Changes
+
+- react 模板 去掉手动存储本地
+
+## 1.4.0
+
+### Minor Changes
+
+- 路由修改
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yyp92-cli/template-react-pc",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "publishConfig": {
     "access": "public"
   },

package/template/src/components/layout/content/index.tsx

@@ -6,6 +6,8 @@ import {Footer} from '../footer'
 import {routerConfig} from '@/router/router'
 import type {RouterConfigItemProps} from '@/router/router'
 import { permissionStore } from '@/store/permission'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
 
 import styles from './index.module.scss'
 
@@ -21,6 +23,8 @@ const Content: React.FC<ContentProps> = ({}) => {
     const {
         permissions
     } = permissionStore()
+    const {token} = tokenStore()
+    const {menus} = menusStore()
 
     const [currentRouter, setCurrentRouter] = useState<RouterConfigItemProps | any>()
 
@@ -28,7 +32,10 @@ const Content: React.FC<ContentProps> = ({}) => {
         const {pathname} = location ?? {}
         const newPathname = pathname.slice(1)
 
-        if (newPathname !== '') {
+        if (!token) {
+            navigate('/login')
+        }
+        else if (newPathname !== '') {
             const pathnameList = newPathname.split('/')
             const getCcondition = () => {
                 if (pathnameList.length === 1) {
@@ -67,6 +74,9 @@ const Content: React.FC<ContentProps> = ({}) => {
                 navigate('/403')
             }
         }
+        else {
+            navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
+        }
     }, [location])
 
 

package/template/src/components/layout/header/index.tsx

@@ -3,8 +3,11 @@ import {useNavigate} from 'react-router-dom'
 import { Avatar, Button, Dropdown, Switch, Tooltip } from 'antd'
 import type { MenuProps } from 'antd'
 import { FullscreenExitOutlined, FullscreenOutlined, UserOutlined } from '@ant-design/icons'
-import { localCache, getDarkTheme } from '@/utils'
-import { LOGIN_TOKEN, USER_INFO, MENUS } from '@/global/constants'
+import { getDarkTheme } from '@/utils'
+import { userInfoStore } from '@/store/login'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
+import { permissionStore } from '@/store/permission'
 
 import styles from './index.module.scss'
 
@@ -14,14 +17,19 @@ interface HeaderProps {
 
 export const Header: React.FC<HeaderProps> = ({ }) => {
     const navigate = useNavigate()
+    const {clearUserInfo} = userInfoStore()
+    const {clearToken} = tokenStore()
+    const {clearMenus} = menusStore()
+    const {clearPermissions} = permissionStore()
     const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
 
 
     // ********* 操作 *********
     const handleLogout = () => {
-        localCache.removeCache(LOGIN_TOKEN)
-        localCache.removeCache(USER_INFO)
-        localCache.removeCache(MENUS)
+        clearToken()
+        clearUserInfo()
+        clearMenus()
+        clearPermissions()
 
         navigate('/login')
     }

package/template/src/components/layout/side/index.tsx

@@ -4,8 +4,7 @@ import type { MenuProps } from 'antd';
 import {useNavigate, useLocation} from 'react-router-dom'
 import {ComponentMap} from '@/router/router'
 import { menusStore } from '@/store/menus'
-import { localCache } from '@/utils'
-import { LOGIN_TOKEN } from '@/global/constants'
+import { tokenStore } from '@/store/token'
 
 import styles from './index.module.scss'
 
@@ -21,6 +20,7 @@ export const Side: React.FC<SideProps> = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const {menus} = menusStore()
+    const {token} = tokenStore()
 
     // 激活的父菜单
     const [openKeys, setOpenKeys] = React.useState<string[]>([])
@@ -45,32 +45,16 @@ export const Side: React.FC<SideProps> = () => {
         const {pathname} = location ?? {}
         const newPathname = pathname.slice(1)
 
-        if (newPathname === '') {
-            const token = localCache.getCache(LOGIN_TOKEN)
+        
+        const pathnameList = newPathname.split('/')
 
-            if (token) {
-                const openKey = menus[0]?.key
-                const selectedKey = menus[0]?.children?.[0]?.key
-
-                setOpenKeys([openKey])
-                setSelectedKeys([selectedKey])
-                navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
-            }
-            else {
-                navigate('/login')
-            }
+        if (pathnameList.length === 1) {
+            setOpenKeys([])
+            setSelectedKeys([pathnameList[0]])
         }
-        else {
-            const pathnameList = newPathname.split('/')
-
-            if (pathnameList.length === 1) {
-                setOpenKeys([])
-                setSelectedKeys([pathnameList[0]])
-            }
-            else if (pathnameList.length === 2 || pathnameList.length === 3) {
-                setOpenKeys([pathnameList[0]])
-                setSelectedKeys([pathnameList[1]])
-            }
+        else if (pathnameList.length === 2 || pathnameList.length === 3) {
+            setOpenKeys([pathnameList[0]])
+            setSelectedKeys([pathnameList[1]])
         }
     }, [])
 

package/template/src/components/layout-horizontal/content/index.tsx

@@ -6,6 +6,8 @@ import { Footer } from '../footer'
 import { routerConfig } from '@/router/router'
 import type { RouterConfigItemProps } from '@/router/router'
 import { permissionStore } from '@/store/permission'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
 
 import styles from './index.module.scss'
 
@@ -17,6 +19,8 @@ interface ContentProps {
 const Content: React.FC<ContentProps> = ({ }) => {
     const location = useLocation()
     const navigate = useNavigate()
+    const {token} = tokenStore()
+    const {menus} = menusStore()
     const {
         permissions
     } = permissionStore()
@@ -27,7 +31,10 @@ const Content: React.FC<ContentProps> = ({ }) => {
         const { pathname } = location ?? {}
         const newPathname = pathname.slice(1)
 
-        if (newPathname !== '') {
+       if (!token) {
+            navigate('/login')
+        }
+        else if (newPathname !== '') {
             const pathnameList = newPathname.split('/')
             const getCcondition = () => {
                 if (pathnameList.length === 1) {
@@ -66,6 +73,9 @@ const Content: React.FC<ContentProps> = ({ }) => {
                 navigate('/403')
             }
         }
+        else {
+            navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
+        }
     }, [location])
 
     // ********** 渲染 **********

package/template/src/components/layout-horizontal/header/index.tsx

@@ -3,8 +3,11 @@ import {useNavigate} from 'react-router-dom'
 import { Avatar, Button, Dropdown, Switch, Tooltip } from 'antd'
 import type { MenuProps } from 'antd'
 import { FullscreenExitOutlined, FullscreenOutlined, UserOutlined } from '@ant-design/icons'
-import { localCache, getDarkTheme } from '@/utils'
-import { LOGIN_TOKEN, USER_INFO, MENUS, PERMISSION } from '@/global/constants'
+import { getDarkTheme } from '@/utils'
+import { userInfoStore } from '@/store/login'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
+import { permissionStore } from '@/store/permission'
 import {Side} from '../side'
 
 import styles from './index.module.scss'
@@ -15,15 +18,19 @@ interface HeaderProps {
 
 export const Header: React.FC<HeaderProps> = ({}) => {
     const navigate = useNavigate()
+    const {clearUserInfo} = userInfoStore()
+    const {clearToken} = tokenStore()
+    const {clearMenus} = menusStore()
+    const {clearPermissions} = permissionStore()
     const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
 
 
     // ********* 操作 *********
     const handleLogout = () => {
-        localCache.removeCache(LOGIN_TOKEN)
-        localCache.removeCache(USER_INFO)
-        localCache.removeCache(MENUS)
-        localCache.removeCache(PERMISSION)
+        clearToken()
+        clearUserInfo()
+        clearMenus()
+        clearPermissions()
 
         navigate('/login')
     }

package/template/src/components/layout-horizontal/side/index.tsx

@@ -4,8 +4,6 @@ import type { MenuProps } from 'antd';
 import {useNavigate, useLocation} from 'react-router-dom'
 import {ComponentMap} from '@/router/router'
 import { menusStore } from '@/store/menus'
-import { localCache } from '@/utils'
-import { LOGIN_TOKEN } from '@/global/constants'
 
 import styles from './index.module.scss'
 
@@ -44,33 +42,15 @@ export const Side: React.FC<SideProps> = ({}) => {
     useEffect(() => {
         const {pathname} = location ?? {}
         const newPathname = pathname.slice(1)
+        const pathnameList = newPathname.split('/')
 
-        if (newPathname === '') {
-            const token = localCache.getCache(LOGIN_TOKEN)
-
-            if (token) {
-                const openKey = menus[0]?.key
-                const selectedKey = menus[0]?.children?.[0]?.key
-
-                // setOpenKeys([openKey])
-                setSelectedKeys([selectedKey])
-                navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
-            }
-            else {
-                navigate('/login')
-            }
+        if (pathnameList.length === 1) {
+            setOpenKeys([])
+            setSelectedKeys([pathnameList[0]])
         }
-        else {
-            const pathnameList = newPathname.split('/')
-
-            if (pathnameList.length === 1) {
-                setOpenKeys([])
-                setSelectedKeys([pathnameList[0]])
-            }
-            else if (pathnameList.length === 2 || pathnameList.length === 3) {
-                // setOpenKeys([pathnameList[0]])
-                setSelectedKeys([pathnameList[1]])
-            }
+        else if (pathnameList.length === 2 || pathnameList.length === 3) {
+            // setOpenKeys([pathnameList[0]])
+            setSelectedKeys([pathnameList[1]])
         }
     }, [])
 

package/template/src/pages/home/index.tsx

@@ -41,7 +41,7 @@ const Home: React.FC<HomeProps> = () => {
             <Button onClick={() => navigate('/login')}>login</Button>
 
             <div style={{ marginTop: 20 }}>
-                <div>姓名：{userInfo.userName}</div>
+                <div>姓名：{userInfo?.userName}</div>
 
                 <Button
                     type="primary"

package/template/src/router/router.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {createBrowserRouter} from 'react-router-dom'
 import { AppstoreOutlined, MailOutlined, NodeCollapseOutlined, SettingOutlined } from '@ant-design/icons';
-// import Layout from '@/components/layout'
-import Layout from '@/components/layout-horizontal'
+import Layout from '@/components/layout'
+// import Layout from '@/components/layout-horizontal'
 import Home from '@/pages/home'
 import { Page403 } from '@/components/403'
 import { Page404 } from '@/components/404'

package/template/src/service/request/index.ts

@@ -2,9 +2,11 @@ import axios from 'axios'
 import { notification, message } from 'antd'
 import type { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
 import type { MyInternalAxiosRequestConfig } from './type'
-import { localCache } from '@/utils/cache'
-import { LOGIN_TOKEN, USER_INFO, PERMISSION, MENUS } from '@/global/constants'
 import router from '@/router/router'
+import { userInfoStore } from '@/store/login'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
+import { permissionStore } from '@/store/permission'
 
 // * 存储待取消的请求：key 是请求唯一标识，value 是 AbortController 实例
 const pendingRequests = new Map()
@@ -67,10 +69,10 @@ const removePendingRequest = (config: AxiosRequestConfig) => {
 // * Token 过期处理函数
 function handleTokenExpired() {
     // 1. 清除本地存储的 Token（避免死循环）
-    localCache.removeCache(LOGIN_TOKEN)
-    localCache.removeCache(USER_INFO)
-    localCache.removeCache(PERMISSION)
-    localCache.removeCache(MENUS)
+    userInfoStore.getState().clearUserInfo()
+    tokenStore.getState().clearToken()
+    menusStore.getState().clearMenus()
+    permissionStore.getState().clearPermissions()
 
     // 排除登录页，避免死循环
     const currentPath = window.location.pathname
@@ -103,7 +105,7 @@ instance.interceptors.request.use(
             addPendingRequest(config)
         }
 
-        const token = localCache.getCache(LOGIN_TOKEN)
+        const token = tokenStore.getState().token
 
         if (config.headers && token) {
             config.headers.Authorization = `Bearer ${token}`

package/template/src/store/login.ts

@@ -7,15 +7,16 @@ import { USER_INFO} from '@/global/constants'
 
 type UserInfoStoreState = {
     userInfo: {
-        userId: string,
-        userName: string
+        userId?: string,
+        userName?: string
     }
 }
 
 type UserInfoStoreActions = {
     setUserInfo: (
         userInfo: UserInfoStoreState['userInfo']
-    ) => void
+    ) => void,
+    clearUserInfo: () => void
 }
 
 type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
@@ -28,6 +29,7 @@ export const userInfoStore = create<UserInfoStore>()(
                 userId: '111'
             },
             setUserInfo: (userInfo) => set({userInfo}),
+            clearUserInfo: () => set({userInfo: {}})
         }),
         {
             name: USER_INFO

package/template/src/store/menus.ts

@@ -11,6 +11,7 @@ type MenusStoreState = {
 
 type MenusStoreActions = {
     setMenus: (menus: string[]) => void,
+    clearMenus: () => void
 }
 
 type MenusStore = MenusStoreState & MenusStoreActions
@@ -19,7 +20,8 @@ export const menusStore = create<MenusStore>()(
     persist(
         (set) => ({
             menus: [],
-            setMenus: (menus) => set({menus})
+            setMenus: (menus) => set({menus}),
+            clearMenus: () => set({menus: []}),
         }),
         {
             name: MENUS

package/template/src/store/permission.ts

@@ -11,6 +11,7 @@ type PermissionStoreState = {
 
 type PermissionStoreActions = {
     setPermissions: (permissions: string[]) => void,
+    clearPermissions: () => void
 }
 
 type PermissionStore = PermissionStoreState & PermissionStoreActions
@@ -19,7 +20,8 @@ export const permissionStore = create<PermissionStore>()(
     persist(
         (set) => ({
             permissions: [],
-            setPermissions: (permissions) => set({permissions})
+            setPermissions: (permissions) => set({permissions}),
+            clearPermissions: () => set({permissions: []}),
         }),
         {
             name: PERMISSION

package/template/src/store/token.ts

@@ -10,7 +10,8 @@ type UserInfoStoreState = {
 }
 
 type UserInfoStoreActions = {
-    setToken: (token: string) => void
+    setToken: (token: string) => void,
+    clearToken: () => void
 }
 
 type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
@@ -19,7 +20,8 @@ export const tokenStore = create<UserInfoStore>()(
     persist(
         (set) => ({
             token: '',
-            setToken: (token) => set({token})
+            setToken: (token) => set({token}),
+            clearToken: () => set({token: ''})
         }),
         {
             name: LOGIN_TOKEN