Question

我试图在Vue项目中实现Oauth（使用Github），当我从github调用我的回调url时，它会在来自url的哈希之前附加查询字符串?code=something。

例如，如果我在浏览器中加载https://myapp.com并点击我的登录链接<a href="https://github.com/login/oauth/authorize?scope=user:email&client_id=1234j1234jk&redirect_uri=https://myapp.com/#/something">Login</a>，我会被重定向到https://myapp.com/?code=asdfasdf#/something，这意味着this.$route.query为空。

作为Vue和Oauth的新手，我如何解决这个问题，以便在调用我的回调时转到https://myapp.com/#/something?code=asdfadsf，以便this.$route.query包含代码？

Answer 1

由于#，Github可能搞砸了。作为一种解决方法，您可以将Github重定向到另一个端点，例如www.yourhost.com/api/v1/redirect-to-home?code=ABCDE（其中没有#），并且您正确地重定向到https://myapp.com/#/something?code=ABCDE。

Answer 2

Github在这里做的正确，因为OAuth与url的查询部分一起使用，并且不会更改锚点。

您可以做的是在启动过程中检测并手动调整网址，这可以通过以下方式完成：

在您的主bootstrap.js（您执行new Vue）文件的文件中，您可以在加载Vue之前手动检测此锚点并更新路径。

这可以通过从引导程序文件中检查window.location，然后调用window.location.href.replace来替换没有可见重定向的网址来完成：

// getParameterByName from https://stackoverflow.com/a/901144/1542723 
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

const code = getParameterByName('code');
if(code) {
    const l = window.location;
    window.location.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname + '123#' + l.hash + '?code=' + code);
}

Github oauth回调url在哈希之前添加查询字符串

2 个答案: