Vue.js带localStorage登录页点击登录不跳转存储失效问题求解

核心问题点 #

你遇到的页面刷新、无存储、不跳转问题由3个直接原因导致：

• 表单默认提交行为未拦截：<form>内的按钮未显式指定type时，默认属性为submit，点击后会触发浏览器原生表单提交逻辑，直接刷新当前页面，你写的异步登录逻辑还没执行完成就被中断，后续的存储、路由跳转代码自然不会运行
• 登录接口调用逻辑错误：
  • 示例登录能力需要调用POST类型的登录接口，你用GET请求拉取用户列表的写法不符合接口要求
  • 你调用的用户列表接口不会校验密码参数，且返回值为分页结构：用户数组存放在result.data.data字段下，直接判断result.data.length > 0永远为假，就算页面不刷新，也永远进不到登录成功的分支逻辑
• 缺少全局登录态校验：就算登录成功写入本地存储，没有路由守卫做拦截判断，也无法稳定实现刷新后保持登录状态的效果

修复方案 #

1. 拦截表单默认提交行为：可以给表单绑定@submit.prevent修饰符，既阻止默认刷新，也支持回车触发登录；也可以直接给按钮加type="button"属性，避免触发提交
2. 修正接口调用逻辑：改用POST方法提交登录参数，按照接口返回的token字段判断登录是否成功，不要用拉取用户列表的方式做登录校验
3. 添加路由全局前置守卫，从本地存储读取登录态，对未登录用户访问受保护页面的行为做拦截
4. 补充异常捕获逻辑，登录失败时给用户明确提示

修复后代码 #

登录页组件代码 #

<template>
  <form @submit.prevent="login">
    <label>Email:</label>
    <input required v-model="email" />
    <label>Password:</label>
    <input type="password" required v-model="password" />
    <button type="submit">LOGIN</button>
  </form>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    async login() {
      try {
        const result = await axios.post(
          "https://reqres.in/api/login",
          {
            email: this.email,
            password: this.password
          }
        );
        // 接口返回200状态码且携带token即为登录成功，测试可用账号：eve.holt@reqres.in，密码：cityslicka
        if (result.status === 200 && result.data.token) {
          localStorage.setItem("userInfo", JSON.stringify({
            email: this.email,
            token: result.data.token
          }));
          this.$router.push("/firstPage");
        }
      } catch (err) {
        alert("登录失败，请检查账号密码是否正确");
        console.error(err);
      }
    },
  },
};
</script>

路由守卫配置（在路由定义文件中添加） #

// 路由实例定义完成后添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 配置不需要登录即可访问的白名单页面
  const whiteList = ['/login']
  const hasLogin = Boolean(localStorage.getItem('userInfo'))
  if (hasLogin) {
    next()
  } else {
    whiteList.includes(to.path) ? next() : next('/login')
  }
})

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