vuejs - 在 vue-router 中使用 JWT 作为参数答案

【问题标题】：vuejs - using JWT as param in vue-routervuejs - 在 vue-router 中使用 JWT 作为参数
【发布时间】：2021-05-17 00:20:51
【问题描述】：

我正在尝试使用 quasar 框架构建一个 vuejs 应用程序。当用户输入他的电子邮件帐户并单击包含 JWT 作为参数的重置密码链接 (http://localhost:8080/reset-password/eyJhbGciOiJIUz...) 时，他会收到以下错误：无法获取 /reset-password/eyJhbGciOiJIUz....

这是 routes.js 中的相关代码：

{
        path: '/reset-password/:token',
        component: () => import('pages/profile/ResetPassword.vue')
}

当我删除 JWT 参数中的 2 个点时，正在加载 VUE 页面。例如，此链接不起作用： HTTP：//本地主机：8080 /复位密码/ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJrZXkiOiJjMjljZDNmNjYwZDNlMWI4NjRhM2JmNjNkODQxZTc2MiIsImlhdCI6MTYxMzIzMTM3MCwiZXhwIjoxNjEzMjMxNDMwfQ.IEchqNWEGAzVZEQhQQIVl9bnbGcu3I_kCXhG8nmKv2k P>

但是这个可以： HTTP：//本地主机：8080 /复位密码/ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJ1c2VyX2lkIjoxLCJrZXkiOiJjMjljZDNmNjYwZDNlMWI4NjRhM2JmNjNkODQxZTc2MiIsImlhdCI6MTYxMzIzMTM3MCwiZXhwIjoxNjEzMjMxNDMwfQIEchqNWEGAzVZEQhQQIVl9bnbGcu3I_kCXhG8nmKv2k P>

如何在不更改 JWT 令牌的情况下通过删除 2 个点来解决它？

【问题讨论】：

你能显示链接代码吗？
嗨丹，例如：localhost:8080/reset-password/…

标签： vue.js jwt vue-router

【解决方案1】：

JWT 令牌由 3 部分（标头、有效负载、验证签名）组成，以句点分隔

标题：算法和令牌类型

in base 64
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

decode base 64
{
  "alg": "HS256",
  "typ": "JWT"
}

有效负载：数据

in base 64
eyJ1c2VyX2lkIjoxLCJrZXkiOiJjMjljZDNmNjYwZDNlMWI4NjRhM2JmNjNkODQxZTc2MiIsImlhdCI6MTYxMzIzMJNTM3MCwiZXhzwjMxNjE

decode base 64
{
  "user_id": 1,
  "key": "c29cd3f660d3e1b864a3bf63d841e762",
  "iat": 1613231370,
  "exp": 1613231430
}

验证签名 IEchqNWEGAzVZEQhQQIVl9bnbGcu3I_kCXhG8nmKv2k

重要的是有效载荷，这是通过url发送的，并使用它。

现在如果要重新创建完整的jwt，header总是一样的，可以这样生成签名

HMACSHA256 (
   base64UrlEncode (header) + "." +
   base64UrlEncode (payload),
   your-256-bit-secret
)

通常密码恢复服务只使用有效负载

https://jwt.io

【讨论】：

【解决方案2】：

我遇到了同样的问题，并通过将令牌添加为查询参数来解决它。这意味着有人会将我的网址称为

domain.com/my-path?token=a.b.c

示例是为 vue3 编写的


const myRoute = {
  path: "my-path",
  name: "My Page",
  component: import("./App.vue"),
  beforeEnter( to, from, next ) {
    const { token } = to.query;
    if (typeof token === "string") {
      const jwtRegEx = /(^[A-Za-z0-9-_]*\.[A-Za-z0-9-_]*\.[A-Za-z0-9-_]*$)/;
      const match = token.match(jwtRegEx);
      if (match === null) {
        next(false);
      } else {
        next();
      }
    } else {
      next(false);
    }
  },
};

beforeEach 函数用于检查令牌是否确实是 jwt。

【讨论】：