logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年

获取当前用户数据

  • 在app组件中添加一个名为get_current_user的方法,用于获取当前用户数据。
  • 方法接受一个user_id参数,并使用try-catch结构处理异常。
  • catch块中设置组件的错误消息为error.message
  • try块中,使用API HTTP client发起GET请求(/users/{user_id})来获取用户数据。
  • 请求成功后,将响应数据response.data赋值给组件的current_user属性。
  • 组件中新增一个current_user数据项表示当前登录用户。
  • 在某个地方调用get_current_user方法,比如在on_login_success事件中,使用登录成功返回的用户id作为参数。
  • 在模板中使用v-if来判断current_user是否有值,并在div元素中显示当前登录用户的用户名。
  • 测试流程包括输入用户名和密码登录,登录成功后请求并展示当前用户数据。