登录按钮绑一个onclick，账号验证通过后执行window.location.href = 'dashboard.html'，密码页面就跳了。登录点击就这么一行，成功但踩坑的跳转人比想象中多。

上个月帮朋友看一个后台项目，账号登录页写得挺漂亮，密码账号密码校验也没问题，登录点击可用户点完登录死活不动。成功他以为是跳转后端接口挂了，查了半天发现fetch返回的账号token都存进localStorage了，就是密码没跳。代码大概长这样：

<button onclick="login()">登录</button> <script> function login() {  fetch('/api/login',登录点击 { ...}) .then(res => res.json()) .then(data => {  localStorage.setItem('token', data.token); // 这里空了 }); } </script>

问题就出在那个注释的位置。他把跳转逻辑写在了fetch外面，成功同步执行，跳转那时候token还没拿到，判断条件直接不成立。改成在.then里面跳，两秒钟解决。

跳转前先确认一件事

不是所有登录成功都该立刻跳。有些场景需要先做点别的——存用户信息、拉权限菜单、初始化websocket。顺序搞反了，跳到目标页再回头取数据，用户会看到一瞬间的白屏或者空状态。我的习惯是把跳转放在最后一步，前面该干的干完再走。

<script> async function login() {  const res = await fetch('/api/login', {  method: 'POST', body: JSON.stringify({  username, password }) }); const data = await res.json(); if (data.code === 200) {  localStorage.setItem('token', data.token); localStorage.setItem('userInfo', JSON.stringify(data.user)); window.location.href = '/dashboard.html'; } else {  alert(data.msg || '账号或密码错误'); } } </script>

window.location.href是最常用的跳法。它会把当前页面塞进浏览器历史记录，用户点后退能回到登录页。这有时候是好事，有时候不是——比如已经登录了，再退回去填一遍表单，体验很怪。换成window.location.replace('/dashboard.html')，历史记录里就没有登录页了，后退直接回到登录之前的页面。用哪个看具体需求，别闭着眼复制。

表单提交的默认行为得拦一下

如果登录按钮是<button type="submit">包在<form>里，不写event.preventDefault()，页面会先刷新一遍。刷新意味着fetch还没回来，页面已经重载了，跳转自然也不会发生。这个坑我见过至少五次，每次都是同一个原因。

<form onsubmit="handleLogin(event)"> <input id="username" /> <input id="password" type="password" /> <button type="submit">登录</button> </form> <script> function handleLogin(e) {  e.preventDefault(); // 后续逻辑 } </script>

还有一种情况：跳转路径写的是相对路径，但当前页面在子目录里。比如登录页在/pages/login.html，跳转写window.location.href = 'dashboard.html'，浏览器会去找/pages/dashboard.html，而不是根目录下的。用/dashboard.html或者完整URL更稳。

跳转之后的事

页面跳走了，但token过期了怎么办？目标页加载时得有个拦截逻辑——读localStorage里的token，没有就踢回登录页。这个判断放在目标页的head里同步执行，别等DOM加载完，否则用户会看到内容闪一下再跳走。

<script> if (!localStorage.getItem('token')) {  window.location.replace('/login.html'); } </script>

登录跳转这件事，核心就一句window.location.href，但周边细节决定了它能不能正常工作。写的时候多想一步：数据存好了吗？表单拦住了吗？路径写对了吗？目标页有没有兜底？这四个问题过一遍，基本不会出岔子。