Vue3账户激活路由404问题求助：带JWT Token的地址无法访问

你的问题出在Laravel生成激活链接时的urlencode处理，以及URL中出现的非法字符（%5C，即反斜杠）被服务器拦截，导致Vue路由无法匹配。

核心原因 #

JWT的Base64URL编码本身包含-、_、.这些URL路径允许的合法字符，不需要额外编码。使用urlencode会将部分字符转义为服务器可能视为非法的编码（比如%5C），直接触发404错误；而短token（如3）没有特殊字符，所以能正常匹配路由。

解决方案 #

1. 修改Laravel激活链接生成代码

移除urlencode，直接拼接JWT到URL中：

$mail = $user->email;
$url = env('FRONTEND_URL') . '/activate-account/' . $token; // 去掉urlencode处理
Mail::send("Mail.UserActivation", ['token' => $token, 'url' => $url , 'user' => $user->name], function ($message) use ($mail) {
    $message->to($mail);
    $message->from(env('MAIL_FROM_Email'), env('MAIL_FROM_NAME'));
    $message->subject('Car Rental User Activation');
});

2. 验证Vue路由参数获取

在ActivateAccountView组件中，确保正确获取token参数：

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const token = route.params.token;

// 示例：发送请求到Laravel后端完成激活
// const activateAccount = async () => {
//   try {
//     await axios.post('/api/activate-account', { token });
//     // 激活成功后的逻辑（如跳转首页、提示用户）
//   } catch (error) {
//     // 处理激活失败的情况（如提示token无效）
//   }
// };
</script>

3. 检查服务器配置（若仍有问题）

如果使用Vue的history模式，确保服务器已配置路由 fallback到index.html：

• Nginx：在站点配置中添加

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache：启用mod_rewrite，并在项目根目录的.htaccess中添加

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

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