Vue-router with google api

假装没事ソ 提交于 2020-01-25 21:53:38

问题


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?


回答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



来源:https://stackoverflow.com/questions/38535565/vue-router-with-google-api

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!