Vue-router with google api

Question

I have a site on Vue with vue-router navigation which needs to work with google drive. I've set up the app, tokens uri in the google developer's console and it works fine on its own:

https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id=668711006022-7igan4in4ob7ngtsmqjh8ld7j8hs5t16.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Ftwine.teivaz.com/auth&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive

But when it came to integrating to vue-router navigation I faced a problem. After making a request to the google ouath2 server it redirects me to a specified address with the token in url params like this:

http://twine.teivaz.com/auth#access_token=ya29.Ci8o1gdfpkN51F3yjAbW-v9r-JN9YD3ze5B2123rvv62KuFc5b1OgzF-9XQ&token_type=Bearer&expires_in=3600

I've came up with several solutions:

1. Set authorized redirect URIs to match the vue-router's format to simply read as parameter, like this:

    http://twine.teivaz.com/#!/login/ 

   But the google console does not allow me to do that giving a message

   Invalid Redirect: http://twine.teivaz.com/#!/login/ cannot contain a fragment.

   It seems that I won't be able to paste in google console my vue-readable URI from the first approach. Is it supposed to be like this or it's a bug in the console?

2. Capture token from url from default page. But in the vue-router I have a default redirect which drops all parameters:

    TwineRouter.redirect({ '*': '/stories' }); 

   It should be there for all url without parameters.

   Is there any way to parse the parameter before redirect occurs and maintain behaviour for all cases when there is no token in parameters?

3. Create another page that will simply save the token to cookies and redirect to the index. And set it up in the google console:

    http://twine.teivaz.com/login.html 

   It seems that this option is a poor design but it might actually work. Is it the best option among given? Is there anything I missed?

Answer 1

a bit too late I think, but you can use

mode: 'history' 

in vue-router, this eliminates # thing from the URL.

http://router.vuejs.org/en/essentials/history-mode.html