Question

我正在尝试在我的应用中使用github添加登录。因此，在我的本地计算机上进行测试时，我将回调网址设置为http://localhost:8000/login/callback/。

之后，我添加了一个登录链接到我的页面，<a href="https://github.com/login/oauth/authorize?client_id=CLIENT_ID&scope=user&redirect_uri=http://localhost:8000/login/callback">Login</a>，以及

$routeProvider.when('/login/callback', {
  controller: 'loginCtrl'
});

它的成功为我提供了一个代码，其中包含以下链接：http://localhost:8000/login/callback?code=cd07ff3b70f5d1d1b8a2。但 angularjs 无法正确回复。

Error response

Error code 404.

Message: File not found.

Error code explanation: 404 = Nothing matches the given URI.

我还尝试将redirect_url设置为http://localhost:8000/#/login/callback，但返回链接就像这样 http://localhost:8000/?code=61e9c8b73c073a0bccc0/#/login/callback

我需要将代码显示在网址的末尾，而不是显示在中间，以便我可以使用$location.search().code来获取代码。我该如何正确设置？

比如更改我的redirect_uri或更改我的路由器？

Answer 1

@lowerkey我仍然不知道如何处理这个问题，但我认为这是因为页面重新加载。

如果您未将html5Mode设置为true，则会在网址上显示#，如果您重新加载页面，则#会跟踪信息到$scope使用htmlHistory api，以便即使页面刷新，应用也能正常工作。

但是，一旦您将html5Mode设置为true，那么就没有#来存储任何$scope信息，并且当页面重新加载时，角度无法找到相应的范围，所以它返回404。

你可以查看$location section on angularjs guide，它有一节解释为什么会这样。

页面重新加载导航

$ location服务允许您仅更改URL;它不允许您重新加载页面。当您需要更改URL并重新加载页面或导航到其他页面时，请使用较低级别的API，$ window.location.href。

Answer 2

我们应该以某种方式推动github以html5友好的方式发送params，即

/login/callback/:code

现在我已经为它创建了我的黑客解决方案：

var code = parseUrlParam($location.absUrl(), 'code');
function parseUrlParam(url, param){
  var temp = url.match(param + '=(\\w*)');
  if(!temp[1]){
    return false;
  }
  return temp[1];
}

带有angularjs的github redirect_uri

2 个答案:

页面重新加载导航