技术求助：如何在Toolbar中解析用户每次登录时的用户名？

嘿，我来帮你搞定这个问题！要在用户登录后把用户名显示在Toolbar里，其实核心逻辑很清晰：登录成功后拿到用户信息，再把信息传递给Toolbar组件并更新UI。下面分两种最常见的场景给你具体实现方案：

• 第一步：登录成功后保存用户信息
  当登录接口请求成功后，把返回的用户名存起来，这里用SharedPreferences举个简单例子（也可以用Jetpack DataStore或者ViewModel，更适合复杂场景）：

  // 登录成功后保存用户名到SharedPreferences
  val sharedPref = getSharedPreferences("UserPrefs", Context.MODE_PRIVATE)
  with(sharedPref.edit()) {
      putString("username", response.body()?.username) // 替换为实际接口返回的用户名
      apply()
  }
  

• 第二步：在Toolbar所在页面读取并显示
  比如在主页面的onCreate或onResume方法里，读取保存的用户名，然后设置给Toolbar：

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      
      // 初始化Toolbar
      val toolbar = findViewById<Toolbar>(R.id.toolbar)
      setSupportActionBar(toolbar)
      
      // 读取用户名
      val sharedPref = getSharedPreferences("UserPrefs", Context.MODE_PRIVATE)
      val username = sharedPref.getString("username", "游客")
      
      // 两种显示方式选其一：
      // 方式1：设置为Toolbar默认标题
      supportActionBar?.title = "欢迎，$username"
      // 方式2：如果Toolbar有自定义TextView，直接赋值
      val tvUsername = toolbar.findViewById<TextView>(R.id.tv_toolbar_username)
      tvUsername.text = "你好，$username"
  }
  

• 第三步：确保登录后实时更新
  如果是从登录页面跳转到主页面，也可以直接通过Intent传递用户名，或者在主页面的onResume中重新读取存储的信息，保证每次回到主页面都能拿到最新的登录状态。

• 第一步：登录成功后存储用户信息
  登录接口返回成功后，把用户名存在localStorage或者全局状态管理工具里（比如Context、Redux，更适合多组件共享的场景）：

  // 方式1：存在localStorage
  localStorage.setItem('username', res.data.username);
  
  // 方式2：用Context全局管理（推荐）
  const { setUserInfo } = useContext(UserContext);
  setUserInfo({ username: res.data.username });
  

• 第二步：在Toolbar组件中获取并渲染
  直接从存储或全局状态中读取用户名，渲染到Toolbar里：

  import React, { useContext } from 'react';
  import { UserContext } from './UserContext';
  
  function Toolbar() {
      // 方式1：从localStorage读取
      const username = localStorage.getItem('username') || '游客';
      
      // 方式2：从Context读取
      // const { userInfo } = useContext(UserContext);
      // const username = userInfo?.username || '游客';
      
      return (
          <div className="toolbar-container">
              <span className="welcome-text">欢迎回来，{username}</span>
              {/* 其他Toolbar按钮/元素 */}
          </div>
      );
  }
  
  export default Toolbar;
  

• 第三步：登录后自动更新
  用localStorage的话，登录后跳转到主页时组件会重新渲染，自动读取最新值；用全局状态的话，状态更新会直接触发Toolbar的重新渲染，无需额外操作。

• 处理未登录状态：如果用户未登录，Toolbar可以显示“登录”按钮，而不是用户名，避免显示默认的“游客”显得突兀。
• 安全性：Web端不要把敏感信息存在localStorage，建议用HttpOnly Cookie；Android端存储用户名时最好加密，不要明文存储。
• 实时同步：如果用户修改了用户名，要同步更新Toolbar的显示，可以通过监听用户信息变化的回调或者事件来实现。

内容的提问来源于stack exchange，提问作者JOSELITO BROMA