logo

该视频仅会员有权观看

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

¥
199
/ 年

在 Vue 应用里记住用户的登录状态

  • 用户登录成功后,刷新页面会导致丢失登录状态。
  • 解决方法是在登录成功后的on log in方法中将令牌存储在浏览器的local storage。
  • 使用setItem方法来存储两个数据项:t e i d(用户的token)和u i d(用户的id)。
  • 当组件创建后,从local storage获取t e i du i d使用getItem方法。
  • 如果这些数据存在,把它们赋值给组件内相应的变量并调用get current user方法获取用户数据。
  • 通过在浏览器的开发者工具中测试,发现刷新页面后用户的登录状态不会丢失,并且显示用户名。
  • 这是因为创建app组件时会从local storage获取t e i d并更新组件内的token数据,再执行用户数据获取方法。