如何让你的前端应用像“永动机”一样保持登录状态？

如何让你的前端应用像"永动机"一样保持登录状态？ ------ 了解 `localStorage` 和 Token

你有没有遇到过这种情况？每次刷新页面都需要重新登录，搞得你都想扔掉键盘了！好消息！今天我们来聊聊如何让你的前端应用拥有"永不失效"的登录体验------通过 localStorage 和 Token 机制，让登录状态"永动"！

什么是 `localStorage`？它能做什么？

localStorage 就像你浏览器里的一个小小文件柜，专门存放不怕丢失的数据。这些数据会永久保存，直到你主动清理它们（或者浏览器自己清理）。它和 sessionStorage 不同，后者只在同一浏览器窗口会话期间有效，浏览器一关，数据就消失了。

所以，localStorage 是存储 登录状态 的理想场所，尤其是在你希望即使用户刷新页面或重新打开浏览器时，登录状态仍然能"复原"的时候。

为什么要用 Token 来保持登录状态？

Token 就像是你进某个派对的入场券，带着它就能进入。每次登录时，我们的后端会给你发一个 Token，这个 Token 会在后续的每次请求中用来证明你是"派对里的贵宾"，而不仅仅是个路过的普通人。

用 Token 来验证身份是现代 Web 应用的标准做法，因为它有两个好处：

无状态认证：服务器不需要存储用户的每一个状态，Token 就是"钥匙"。
跨域方便：Token 可以在不同的域名或服务之间传递，而不像 Cookie 那样容易受限于同源策略。

核心流程：让登录状态永不丢失

1. 登录成功后，存储 Token 和用户信息

假设你已经成功登录，我们就会把获得的 Token 和用户信息存储到 localStorage 中。下次用户打开应用时，浏览器会自动带上这个 Token，就像带上了那张派对入场券。

csharp 复制代码

// 从响应头或响应体中获取 Token 并保存
const tokenToSave = tokenFromHeader || tokenFromData
if (tokenToSave) {
    localStorage.setItem('token', tokenToSave)
}

2. 页面刷新时自动恢复登录状态

用户刷个页面不代表要重新登录！我们会在页面加载时，检查 localStorage 是否有有效的 Token 和用户信息。如果有，马上恢复登录状态：

ini 复制代码

const savedToken = getToken()
const savedUserInfo = getUserInfo()

if (savedToken && savedUserInfo) {
    token.value = savedToken
    userInfo.value = savedUserInfo
    isLoggedIn.value = true
    showLoginModal.value = false
}

这样一来，用户即使刷新页面，也不需要再次输入密码，体验流畅无比。

3. 用户登出时，清除本地存储

当用户选择登出时，我们就会清除 localStorage 中存储的 Token 和用户信息，确保一切痕迹都被抹去：

javascript 复制代码

localStorage.removeItem('token')
localStorage.removeItem('userInfo')

这样做的好处是，即使用户不小心离开了页面，刷新之后，他们也能安全地重新登录，而不会发现自己一直"被遗忘"在后台。

总结：如何让你的应用保持登录状态？

通过使用 localStorage 存储 Token 和用户信息，我们能够轻松地在页面刷新、重启浏览器等场景下保持用户的登录状态。这种方式让你无需每次都让用户重新输入用户名和密码，提供了更流畅、更便捷的用户体验。

不仅如此，通过请求拦截器，每次请求都会自动带上 token，后端就可以识别出请求者的身份，轻松处理用户认证问题。你的应用就像拥有了一个"永动机"，登录状态持续不断地运转下去。

小贴士：

如果你非常注重安全，记得定期刷新 Token，避免 Token 被盗用后长时间有效。
永远记得，localStorage 适合存储非敏感的用户数据（例如登录状态），敏感数据应该使用更安全的存储方式。

如何让你的前端应用像“永动机”一样保持登录状态？