Github oauth 콜백 URL이 해시 전에 쿼리 문자열을 추가하는 중

Github oauth 콜백 URL이 해시 전에 쿼리 문자열을 추가하는 중

Vue 프로젝트에서 Oauth(기투브 사용)를 구현하려고 하는데, 기투브에서 콜백 URL이 호출되면 쿼리 문자열이 추가되는 겁니다.?code=somethingurl에서 해시 전에.

예를 들어 로드하는 경우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암호가 들어있을까?

기투브는 아마 그 때문에 일을 망치고 있을 것이다.#해결책으로 Github를 다른 엔드포인트로 리디렉션할 수 있다.www.yourhost.com/api/v1/redirect-to-home?code=ABCDE(없음)#(그 안에) 로 올바르게 리디렉션할 수https://myapp.com/#/something?code=ABCDE.

OAuth는 url의 쿼리 부분과 함께 작동하며 닻을 변경하지 않기 때문에 Github는 여기서 올바른 일을 하고 있다.

부팅 프로세스에서 URL을 검색하고 수동으로 조정하는 작업을 다음과 같이 수행할 수 있다.

기본 bootstrap.js(수행하는 파일) 내부new Vue) 파일, Vue가 로드되기 전에 수동으로 이 앵커를 감지하고 경로를 업데이트할 수 있다.

이 작업은 체크하여 수행할 수 있다.window.location부트스트랩 파일에서 호출한 다음window.location.href.replace볼 수 있는 리디렉션 없이 URL을 대체하려면:

// 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);
}

참조URL: https://stackoverflow.com/questions/49765542/github-oauth-callback-url-is-adding-query-string-before-hash