VueJs 获得调用特定路由的推荐 URL

Question

我正在尝试从调用我的 VueJS 应用程序的特定路由的位置获取推荐 URL 。

流程是：

1. Route1使用returnURL重定向到（外部） URL1
2. (outside) URL1执行一些动作并返回returnURL
3. ReturnUrl匹配Route2并显示一个视图（仅当它来自URL1时）

我试过：

router.beforeEach((to, from, next) => {
  console.log(to)
  console.log(from)
  next()
})

但是from url 的总是/ 。 我也试过：

this.$route.query

（来自How to get http 在 vuejs 中引用？ ）

使用普通的 JS，例如：

var referrer = document.referrer;

最后我尝试使用这个插件没有成功。

问题是我不知道用户是直接调用returnUrl （禁止）还是来自外部服务URL1 （有效）的调用。

这可能吗？

我查了一下： 我可以得到推荐人吗？

Answer 1

请查看此演示： https://codesandbox.io/s/vuejs-get-referral-url-that-called-a-specific-route-qzumx以获取更新的解决方案。

使用 vue-router（仅适用于应用程序）

在这里使用的一个可能有用的 vue-router 钩子是beforeRouteEnter ， 这里的文档。 它在渲染该组件的路由被确认之前被调用。 这个想法是，在这个 vue-router 钩子中，我们可以设置previousPath属性并在 Vue 组件中利用它。

但是由于 vue-router 只能访问应用内的路由变化，当访问者来自外部链接时，它无法帮助获取之前的 URL。

使用加密参数（仅当您可以编辑“源”中的链接时）

另一种解决方案是通过在 URL 中添加有关当前时间戳的加密参数来更改 URL。 在应用程序中，我们解密参数，比较两个时间戳，仅当时间差在某个阈值（如 5s）内时才返回 true。

使用这种方法，只有当访问者通过链接进入您的应用程序时，验证方法才会返回true 。 该链接将在 5 秒后过期，因此如果恶意用户复制/粘贴该链接，它将无法正常工作。 由于它被加密，手动更改 URL 参数也不起作用。

至于加密方式，我使用的是最简单的 Base64 编码方式btoa ，没有 3rd 方库。 当然，您可以将其切换到其他一些加密库。 但是，使用时间戳作为键可能是满足您要求的解决方案。

您还可以使用此方法轻松加密/解密和验证其他参数，包括源 URL。