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

Question

我正在尝试使用类星体框架构建一个vuejs应用程序。当用户输入他的电子邮件帐户并单击重置密码链接，其中包括一个JWT作为参数(http://localhost:8080/reset-password/eyJhbGciOiJIUz…)，他得到这个错误:Cannot GET/reset-password/eyJhbGciOiJIUz....

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

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

当我删除JWT参数中的2个点时，VUE页面正在加载。例如，这个链接不起作用:http://localhost: 8080/reset-password eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJrZXkiOiJjMjljZDNmNjYwZDNlMWI4NjRhM2JmNjNkODQxZTc2MiIsImlhdCI6MTYxMzIzMTM3MCwiZXhwIjoxNjEzMjMxNDMwfQ.IEchqNWEGAzVZEQhQQIVl9bnbGcu3I_kCXhG8nmKv2k

但是这个可以:http://localhost: 8080/reset-password eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJ1c2VyX2lkIjoxLCJrZXkiOiJjMjljZDNmNjYwZDNlMWI4NjRhM2JmNjNkODQxZTc2MiIsImlhdCI6MTYxMzIzMTM3MCwiZXhwIjoxNjEzMjMxNDMwfQIEchqNWEGAzVZEQhQQIVl9bnbGcu3I_kCXhG8nmKv2k

我如何通过删除2个点而不更改JWT令牌来解决它?

Answer 1

JWT令牌由3部分组成(报头、有效载荷、验证签名)，由句号分隔

HEADER: ALGORITHM &令牌类型

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，头将始终是相同的，签名可以像这样生成

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

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

https://jwt.io

Answer 2

我也遇到了同样的问题，并通过添加令牌作为查询参数解决了这个问题。这意味着有人会调用我的url为

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

示例是为ve3

编写的

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。