带有谷歌 api 的 Vue 路由器答案

【问题标题】：Vue-router with google api带有谷歌 api 的 Vue 路由器
【发布时间】：2016-11-26 21:29:49
【问题描述】：

我在 Vue 上有一个带有 vue-router 导航的站点，它需要与谷歌驱动器一起使用。我已经在谷歌开发者的控制台中设置了应用程序，令牌 uri，它本身就可以正常工作：

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

但是在集成到 vue-router 导航时，我遇到了一个问题。在向 google ouath2 服务器发出请求后，它会将我重定向到指定地址，并使用 url 参数中的令牌，如下所示：

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

我想出了几个解决方案：

设置授权重定向 URI 以匹配 vue-router 的格式以简单地读取为参数，如下所示：
```
http://twine.teivaz.com/#!/login/
```
但谷歌控制台不允许我这样做并提供消息

无效重定向：http://twine.teivaz.com/#!/login/ 不能包含片段。

看来我无法通过第一种方法将我的 vue 可读 URI 粘贴到谷歌控制台中。它应该是这样还是控制台中的错误？
从默认页面的 url 捕获令牌。但是在 vue-router 中，我有一个默认重定向，它会丢弃所有参数：
```
TwineRouter.redirect({
    '*': '/stories'
});
```
所有不带参数的url都应该有。

有没有办法在重定向发生之前解析参数并在参数中没有令牌时保持所有情况下的行为？
创建另一个页面，该页面将简单地将令牌保存到 cookie 并重定向到索引。并在 google 控制台中进行设置：
```
http://twine.teivaz.com/login.html
```
这个选项的设计似乎很糟糕，但它可能确实有效。它是给定的最佳选择吗？有什么我错过的吗？

【问题讨论】：

标签： javascript google-api google-oauth vue-router

【解决方案1】：

我觉得有点晚了，但你可以使用

mode: 'history'

在 vue-router 中，这会从 URL 中消除 # 的东西。

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

【讨论】：