How to deal with fragment GET parameters in Vue Router?

Question

After trying a backend implementation of Gitlab's OAuth using Web Application Flow, I'm trying out Implicit Grant in my Vue frontend.

The access code that the API sends me is in fragment url parameter format. Which means it uses the hash symbol #foo=bar&moo=var instead of standard ?foo=bar&moo=var which conflicts with the default Vue Router configuration.

After trying history mode in the Vue Router, which dosent use the # in his urls, I can access the Vue Router parameter with $route.hash. My current problem is that I have to split and trim the parameters myself with something like the following:

const params = this.$route.hash.split('&').map(part => part.replace(/#/, ''));
const parsedParams = {};
params.forEach(param => {
  const parts = param.split('=');
  parsedParams[parts[0]] = parts[1];
});

which outputs { foo: "bar", moo: "var" }

Is there a better or more standart way to deal with fragment parameters in VueRouter? If not, is there a standart solution to this outside of Vue?

Answer 1

It seems to me that my code snippet is a good enough solution, although I was expecting some support for OAuth standarts in vue. Maybe my expectations are too high?

This is what I ended up using

const parsedParams = {};
this.$route.hash.split('&')
  .map(part => part.replace(/^#/, ''))
  .forEach(param => {
    const parts = param.split('=');
    parsedParams[parts[0]] = parts[1];
  });

you can also uri decode your parameters directly from within this loop using

    parsedParams[parts[0]] = decodeURIComponent(parts[1]);