Vue Router：如何强制首次登录用户改密码并限制路由跳转

核心思路 #

已登录且未修改默认密码的用户，仅允许访问修改密码页面，禁止跳转至其他路由；同时确保路由守卫逻辑无遗漏next()调用，避免无限循环。

步骤1：配置路由meta标记 #

给修改密码页面添加专属meta，明确该页面允许未改密码用户访问：

const routes = [
  { path: '/login', name: 'Login', component: Login },
  // 改密页添加允许标记
  { 
    path: '/change-password', 
    name: 'ChangePassword', 
    component: ChangePassword, 
    meta: { allowWithDefaultPwd: true } 
  },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  // 其他业务路由无需添加该meta
]

步骤2：编写正确的beforeEach守卫逻辑 #

确保所有分支都调用next()，同时避免在改密页重复跳转导致循环：

router.beforeEach((to, from, next) => {
  // 从本地存储/状态管理获取当前用户信息
  const currentUser = JSON.parse(localStorage.getItem('currentUser'))
  const isLoggedIn = !!currentUser

  // 未登录处理：仅允许访问登录页
  if (!isLoggedIn) {
    to.name === 'Login' ? next() : next({ name: 'Login' })
    return // 终止后续逻辑，避免代码冗余
  }

  // 已登录且需修改密码的情况
  const needChangePwd = currentUser.hasDefaultPassword
  if (needChangePwd) {
    // 当前要去的不是改密页，强制跳转
    if (!to.meta.allowWithDefaultPwd) {
      next({ name: 'ChangePassword' })
    } else {
      // 已在改密页，直接放行
      next()
    }
  } else {
    // 已改密码，正常放行（可在此添加其他权限校验）
    next()
  }
})

步骤3：改密码成功后更新状态 #

修改密码接口调用成功后，必须更新用户的hasDefaultPassword属性，确保路由守卫能识别状态变化：

// 改密码成功后的示例代码
async handleChangePassword() {
  try {
    await this.$api.user.changePassword(this.form)
    // 更新本地存储的用户信息
    const updatedUser = { ...this.$store.state.user, hasDefaultPassword: false }
    localStorage.setItem('currentUser', JSON.stringify(updatedUser))
    // 更新vuex状态（如果使用）
    this.$store.commit('user/updateUser', updatedUser)
    // 跳转至首页或业务页面
    this.$router.push({ name: 'Dashboard' })
  } catch (err) {
    console.error('改密码失败:', err)
  }
}

关键注意事项 #

• 所有逻辑分支必须调用next()，否则会触发"未调用next回调"的错误
• 仅当用户未在改密页时才跳转改密页，避免无限循环
• 改密码成功后必须同步更新用户状态，否则路由守卫仍会限制访问

内容的提问来源于stack exchange，提问作者Joaquin Leon