Token 是什么
Token 是后端签发的临时凭证，用来标识用户身份和权限。它就像一张临时通行证，前端拿到后需要妥善保管，并在每次请求时出示。
获取 Token
登录接口返回的数据里包含 Token，字段名可能叫 token、access_token，也可能嵌套在 data.token 中。别硬猜，一切以后端文档为准。拿到后立刻存起来，别只在控制台打印。如果有 refresh_token，也一并保存。
存在哪里？
选择存储方式，主要看两点：刷新后丢不丢，和你是否要求关掉浏览器就自动登出。
| 存储方式 | 特点 | 适合场景 | 用法 |
|---|---|---|---|
| localStorage | 持久化，不超过 5MB，关闭浏览器也不会丢 | 大部分 Web 应用，'记住我'的登录状态 | localStorage.setItem('token', value) |
| sessionStorage | 标签页关闭就清空，大小同 5MB | 安全性要求高，比如网银、政务系统 | sessionStorage.setItem('token', value) |
| Cookie | 可设置过期时间，容量只有 4KB，能自动附带在请求里，服务端也能读 | 要服务端直接读 Token，或者跨域 SSO 场景 | document.cookie = 'token=value; expires=...; path=/' |
优先选 localStorage 就行，大多数项目够用。不要同时往多处存，否则数据不一致会让你排查到头疼。还有，Token 里别放用户隐私数据，它就是凭证，不是数据容器。
请求时带上 Token
业务请求需要把 Token 放到请求头里。不要手忙脚乱每个接口加一遍，用 HTTP 库的请求拦截器统一处理。常见的请求头写法有两种：
token: 你的token值
Authorization: Bearer 你的token值
用 Authorization: Bearer 更标准，但也看后端要求。拦截器里判断 Token 存在才加，不要把一个空值发过去。
Token 过期了怎么办
后端通常在 Token 失效时返回 401 状态码。在响应拦截器里统一处理：只要是 401，就提示用户'登录过期'，清掉所有存储的 Token 和用户信息，然后跳回登录页。清理要彻底，localStorage、sessionStorage、Cookie，凡是有存过的地方都扫一遍。跳转时用 replace 而不是 push，免得用户按返回键又回到过期页面。
手动登出
用户点'退出登录'时，先弹出个确认框，防止手滑。确认后清除所有 Token 和相关状态，同样要彻底。如果后端提供了登出接口，调一下，让服务端也销毁那个 Token，再跳登录页。
路由拦截（进阶）
前端可以做一层路由守卫：没登录不能进内页，已登录不能去登录页。定义好白名单（登录页、注册页、404 等），然后在路由跳转前检查 Token。有 Token 就放行，没有就重定向到登录页。记住这只是前端层面的校验，真正的安全还要靠后端。另外别在路由守卫里调接口验证 Token，每次跳转都做的话页面会卡得不行。
容易犯的错
- 只把 Token 存组件状态里，一刷新就没了。
- 每个请求手动加 Token，重复代码多，还容易漏。
- 忽视了 401，不处理过期，让用户带着过期 Token 操作，接口返回错误也不提示。
- Token 里塞了一堆用户数据，增加了泄露风险。
- 登出没有确认，误触一下全没了。
整个流程不复杂，但细节多，把这些点都考虑到，能让用户登录体验顺畅不少。
