[ISSUE #319] Store the username in localStorage

frontend-new/src/components/Navbar.jsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import { Layout, Menu, Dropdown, Button, Drawer, Grid, Space } from 'antd';
 import {GlobalOutlined, DownOutlined, UserOutlined, MenuOutlined, BgColorsOutlined} from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -26,13 +26,13 @@ import {remoteApi} from "../api/remoteApi/remoteApi";
 const { Header } = Layout;
 const { useBreakpoint } = Grid; // Used to determine screen breakpoints
 
-const Navbar = ({ username, rmqVersion = true, showAcl = true}) => {
+const Navbar = ({ rmqVersion = true, showAcl = true}) => {
     const location = useLocation();
     const navigate = useNavigate();
     const { lang, setLang, t } = useLanguage();
     const screens = useBreakpoint(); // Get current screen size breakpoints
     const { currentThemeName, setCurrentThemeName } = useTheme();
-
+    const [userName, setUserName] = useState(null);
     const [drawerVisible, setDrawerVisible] = useState(false); // Controls drawer visibility
 
     // Get selected menu item key based on current route path
@@ -46,10 +46,10 @@ const Navbar = ({ username, rmqVersion = true, showAcl = true}) => {
     const onLogout = () => {
         remoteApi.logout().then(res => {
             if (res.status === 0) {
-                window.sessionStorage.removeItem("username");
+                window.localStorage.removeItem("username");
-                window.sessionStorage.removeItem("userRole");
+                window.localStorage.removeItem("userRole");
-                window.sessionStorage.removeItem("token");
+                window.localStorage.removeItem("token");
-                window.sessionStorage.removeItem("rmqVersion");
+                window.localStorage.removeItem("rmqVersion");
                 navigate('/login');
             } else {
                 console.error('Logout failed:', res.message)
@@ -59,6 +59,15 @@ const Navbar = ({ username, rmqVersion = true, showAcl = true}) => {
 
     };
 
+    useEffect(() => {
+        const storedUsername = window.localStorage.getItem("username");
+        if (storedUsername) {
+            setUserName(storedUsername);
+        }else {
+            setUserName(null);
+        }
+    }, []);
+
     const langMenu = (
         <Menu onClick={({ key }) => setLang(key)}>
             <Menu.Item key="en">{t.ENGLISH}</Menu.Item>
@@ -66,13 +75,6 @@ const Navbar = ({ username, rmqVersion = true, showAcl = true}) => {
         </Menu>
     );
 
-    const versionMenu = (
-        <Menu onClick={({ key }) => alert(t.version.switchVersion + ': ' + key)}>
-            <Menu.Item key="5">RocketMQ v5</Menu.Item>
-            <Menu.Item key="4">RocketMQ v4</Menu.Item>
-        </Menu>
-    );
-
     const userMenu = (
         <Menu>
             <Menu.Item key="logout" onClick={onLogout}>{t.LOGOUT}</Menu.Item>
@@ -159,12 +161,12 @@ const Navbar = ({ username, rmqVersion = true, showAcl = true}) => {
                     </Button>
                 </Dropdown>
 
-                {username && (
+                {userName && (
                     <Dropdown overlay={userMenu}>
                         {/* 使用一个可点击的元素作为 Dropdown 的唯一子元素 */}
                         <a onClick={e => e.preventDefault()} style={{ display: 'flex', alignItems: 'center' }}>
                             <UserOutlined style={{ marginRight: 8 }} /> {/* 添加一些间距 */}
-                            {username}
+                            {userName}
                             <DownOutlined style={{ marginLeft: 8 }} />
                         </a>
                     </Dropdown>

frontend-new/src/i18n/index.js

@@ -278,7 +278,7 @@ export const translations = {
         "PLEASE_ADD_RESOURCE": "请添加资源!",
         "ENTER_IP_HINT": "请输入 IP 地址，按回车键添加，支持 IPv4、IPv6 和 CIDR",
         "PLEASE_ENTER_DECISION": "请输入决策!",
-
+        "MENU": "菜单",
     },
     en: {
         "DEFAULT": "Default",
@@ -535,6 +535,8 @@ export const translations = {
         "PLEASE_ADD_RESOURCE": "Please add resource!",
         "ENTER_IP_HINT": "Please enter IP address, press Enter to add. Supports IPv4, IPv6, and CIDR.",
         "PLEASE_ENTER_DECISION": "Please enter decision!",
+        "MENU": "Menu",
+
     }
 
 };

frontend-new/src/pages/Login/login.jsx

@@ -30,8 +30,8 @@ const Login = () => {
         remoteApi.login(username, password).then((res) => {
             if (res.status === 0) {
                 messageApi.success('登录成功');
-                window.sessionStorage.setItem("username", res.data.loginUserName);
+                window.localStorage.setItem("username", res.data.loginUserName);
-                window.sessionStorage.setItem("userrole", res.data.loginUserRole);
+                window.localStorage.setItem("userrole", res.data.loginUserRole);
                 window.location.href = '/';
             } else {
                 messageApi.error(res.message || '登录失败，请检查用户名和密码');

frontend-new/src/router/index.jsx

@@ -71,7 +71,7 @@ const AppRouter = () => {
     return (
         <Layout style={{minHeight: '100vh'}}>
             <Header style={{padding: 0, height: 'auto', lineHeight: 'normal'}}>
-                <Navbar username={window.sessionStorage.getItem("username")}/>
+                <Navbar/>
             </Header>
 
             <Content style={{padding: '24px'}}>