VueJs get referral URL that called a specific route

Question

I'm trying to get the referral URL from where a specific route from my VueJS app was called.

The flow is:

1. Route1 redirects to (outside) URL1 with a returnURL
2. (outside) URL1 performs some actions and returns to returnURL
3. ReturnUrl matches Route2 and shows a view (only if it comes from URL1)

I've tried with:

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

But the from url is always /. Also I tried with:

this.$route.query

(from How to get http refere in vuejs?)

And with plain JS with something like:

var referrer = document.referrer;

Finally I tried with this plugin without success.

The problem is that I don't have any clue if the user called directly the returnUrl (forbidden) or it's a call from the outside service URL1 (valid).

It's this possible?

I checked: Can I get the referrer?

Answer 1

Please check this demo: https://codesandbox.io/s/vuejs-get-referral-url-that-called-a-specific-route-qzumx for updated solution.

use vue-router (only works within the app)

A possibly useful hook of vue-router to use here is beforeRouteEnter, docs here. It is called before the route that renders this component is confirmed. The idea is that, in this vue-router hook, we can set the previousPath property and leverage it in the Vue component.

However, as vue-router only have access to route changes within the app, it can't help get the previous URL when the visitor comes from links outside.

use encrypted params (only when you can edit the link in the 'source')

An alternative solution is to alter the URL, by adding an encrypted parameter in the URL about current timestamp. In the app, we decrypt the parameter, compare two timestamps, and only return true when the time difference is within some threshold like 5s.

With this approach, only when visitors are coming into your app following the link would the validation method returns true. The link would expire in 5s, so if malicious user copy/paste the link, it won't work. As it's being encrypted, altering the URL params manually also won't work.

As for the encryption method, I'm using the simplest Base64-encoding approach btoa without 3rd party library. Of course, you can switch it to some other encryption libraries. However, using a timestamp as the key would be a possible solution for your requirements.

You can also easily encrypt/decrypt and verify other params, including source URL with this approach.