登录

上面这段代码，成功是后跳很多前端新手写登录跳转的第一版。`window.location.href` 直接赋值，转页页面瞬间切换，登录干净利落。成功但你要是后跳真在项目里这么干，大概率会被后端同事骂一顿。转页 问题出在哪？登录跳转本身没毛病，毛病在于“登录成功”这个状态没有被记住。成功你刷新一下 dashboard 页面，后跳浏览器压根不知道你是转页谁，后端接口一查 session，登录空的成功，直接把你踢回登录页。后跳用户刚输完密码，眨眼又回到起点，脾气差点的当场摔鼠标。 所以正经项目里，跳转前得先干一件事：把登录凭证存下来。常见做法是存 token 到 localStorage 或者 cookie。比如： ```javascript // 假设后端返回了 token const token = response.data.token; localStorage.setItem('auth_token', token); window.location.href = '/dashboard.html'; ``` 存完 token 再跳，后端接口就能通过这个 token 识别你的身份。但这里有个坑——很多人跳转写得太急，token 还没存完就跳了。异步操作里尤其容易出这问题。比如你用 fetch 登录，忘了 await，响应还没回来，页面已经跳走了。结果 dashboard 拿不到 token，照样被踢。 我见过最离谱的一次，同事把跳转写在 setTimeout 里，延时 3 秒。问他为啥，他说“怕页面加载太快，用户看不清登录成功的提示”。这逻辑我到现在没想通——用户是来办事的，不是来看动画的。跳转要快，但要稳。快是指逻辑上不拖泥带水，稳是指确保状态都落盘了再动。 还有个细节容易被忽略：跳转地址别写死。你写死 `/dashboard.html`，哪天后端把路由改成 `/home`，你得翻遍全项目找这一行。好点的做法是后端在登录接口的返回值里带上跳转地址，比如 `response.data.redirectUrl`。前端拿到后直接 `location.href = redirectUrl`。这样后端改路由，前端零改动。 要是遇到需要带参数跳转的情况，比如从登录页跳到用户中心，还得带上用户 ID，那就拼 URL： ```javascript const userId = response.data.userId; window.location.href = `/user/${ userId}?from=login`; ``` 注意这里用模板字符串，别用加号硬拼，容易漏斜杠。拼完 URL 最好 console.log 出来看一眼，别嫌麻烦，我见过因为少写一个问号导致参数解析失败，用户卡在空白页骂娘。 最后说个反直觉的事：跳转不一定非要用 `window.location.href`。如果你的页面是单页应用（SPA），用路由的 `push` 方法跳转更合适。比如 Vue 的 `router.push('/dashboard')`，React 的 `useNavigate()('/dashboard')`。这种跳转不会刷新整个页面，用户体验更顺滑。但前提是你得先处理好 token 存储，否则 SPA 内部跳转后，内存里的变量还在，一刷新就露馅。 判断该用哪种跳转，就一个标准：你的应用是不是多页面。多页面用 `location.href` 简单粗暴，单页面用路由跳转优雅流畅。别混着用，不然路由状态和浏览器历史记录会打架，用户点后退按钮，直接退到登录页，又是一通骂。 写登录跳转这活儿，看着简单，其实考验的是对应用整体架构的理解。存好状态，想清楚跳转方式，再动手写代码。顺序反了，后面全是坑。