如何使用Axios从URL提取token参数实现密码重置功能？

1. 从重置密码页面URL提取Token #

当用户点击邮件链接打开重置页面时，需从当前页面URL中提取Token，分两种常见场景处理：

纯静态前端页面 #

用原生JS解析URL路径：

// 获取当前页面的路径部分
const path = window.location.pathname;
// 拆分路径，比如 "/reset-password/xdsnjx" 会拆成 ["", "reset-password", "xdsnjx"]
const pathSegments = path.split('/');
// 取最后一段即为Token
const resetToken = pathSegments[pathSegments.length - 1];

前端框架（React/Vue） #

如果使用路由框架，可直接通过路由参数获取：

• React Router（v6+）：

  import { useParams } from 'react-router-dom';
  
  const ResetPasswordPage = () => {
    const { token } = useParams(); // 路由需配置为 "/reset-password/:token"
    // 后续用此token发起请求
  };
  

• Vue Router：

  const ResetPasswordPage = {
    mounted() {
      const resetToken = this.$route.params.token; // 路由需配置为 "/reset-password/:token"
    }
  };
  

2. 修正Axios请求与后端路由匹配 #

你当前的核心问题是前端传递Token的方式和后端接收方式不匹配：

• 后端updatePassword函数用req.params.token接收，说明后端路由需定义为带路径参数的形式，比如Express路由：

  router.patch('/api/v1/admin/updatepass/:token', updatePassword);
  

• 你之前用Axios的params选项，是把Token放在URL查询参数中（比如/updatepass?token=xdsnjx），后端从req.params无法获取，这就是请求失败的原因。

修正后的Axios请求 #

将Token作为路径参数拼接到请求URL中：

const changePassword = async (pass) => {
  try {
    // 先提取Token（用上面的方法拿到resetToken）
    const resetToken = window.location.pathname.split('/').pop();
    const res = await axios({
      method: 'PATCH',
      url: `http://localhost:3000/api/v1/admin/updatepass/${resetToken}`,
      data: {
        password: pass // 注意键名要和后端接收的`password`对应
      },
    });
    console.log(res);
  } catch (err) {
    // 捕获错误便于调试
    console.error('密码更新失败:', err);
  }
};

3. 后端代码优化 #

给后端updatePassword函数增加异常判断，避免无用户时报错：

const updatePassword = async (req, res, next) => {
  const { token } = req.params;
  const { password } = req.body;

  const user = await User.findOne({
    where: { token },
    attributes: ['id', 'password', 'token'],
  });

  // 若找不到用户，直接返回错误响应
  if (!user) {
    return res.status(400).json({ message: '无效或已过期的重置Token' });
  }

  const salt = await bcrypt.genSalt(10);
  user.password = await bcrypt.hash(password, salt);
  user.token = null;
  user.confirmed = true;
  await user.save();
  
  // 返回成功响应给前端
  return res.status(200).json({ message: '密码更新成功' });
};

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