这是个很常见的跨设备密码重置场景，核心思路其实很直接——既然密钥已经在重置URL里了，我们只需要从URL中提取它，再和用户输入的新密码一起提交给后端就好，完全不需要依赖localStorage。具体实现步骤如下：

1. 从URL查询参数中提取重置密钥 #

不管你用的是Vue 2还是Vue 3，都可以通过路由工具获取URL里的密钥参数。假设你的重置链接格式是 https://your-app.com/reset-password?token=xxx-xxx-xxx：

Vue 2 选项式API写法 #

export default {
  data() {
    return {
      newPassword: '',
      resetToken: ''
    };
  },
  created() {
    // 从路由查询参数中拿到token
    this.resetToken = this.$route.query.token;
    // 可选：如果token不存在，直接提示链接无效并跳转
    if (!this.resetToken) {
      alert('无效的密码重置链接');
      this.$router.push('/login');
    }
  }
};

Vue 3 组合式API写法 #

import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const newPassword = ref('');
    const resetToken = ref('');
    const route = useRoute();
    const router = useRouter();

    onMounted(() => {
      resetToken.value = route.query.token;
      if (!resetToken.value) {
        alert('无效的密码重置链接');
        router.push('/login');
      }
    });

    return { newPassword, resetToken };
  }
};

2. 提交表单时携带密钥与新密码 #

在表单提交的方法里，把提取到的密钥和用户输入的新密码一起作为请求体发送给后端接口：

// 以Vue 2为例，Vue 3逻辑类似
methods: {
  async submitResetPassword() {
    try {
      // 调用后端重置密码接口
      await this.$axios.post('/api/auth/reset-password', {
        token: this.resetToken,
        newPassword: this.newPassword
      });
      // 提交成功后的逻辑：比如跳转登录页、提示用户密码已重置
      alert('密码重置成功，请重新登录');
      this.$router.push('/login');
    } catch (error) {
      // 处理错误：比如token过期、密码不符合复杂度要求等
      alert(error.response.data.message || '密码重置失败，请重试');
    }
  }
}

额外的安全与体验建议 #

• 确保后端对重置密钥做一次性验证：用户提交后立即失效，避免同一个链接被多次使用带来的安全风险。
• 可选：在组件加载时先验证密钥有效性——比如调用后端的/api/auth/validate-reset-token接口，提前告知用户链接是否过期，不用等输入密码后才报错。
• 务必使用HTTPS：防止URL中的密钥在传输过程中被明文截取，保障数据安全。

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