angular-ui 替换'?'从 facebook oauth 重定向时带有“#”
Posted
技术标签:
【中文标题】angular-ui 替换\'?\'从 facebook oauth 重定向时带有“#”【英文标题】：angular-ui replace'?' with '#' on redirect from facebook oauthangular-ui 替换'?'从 facebook oauth 重定向时带有“#” 【发布时间】：2015-07-27 05:56:42 【问题描述】：我在没有 SDK 的 angularjs 中实现 facebook ouath 登录。
除了一件事之外，一切都按预期进行。
当用户点击登录按钮，重定向到facebook登录页面，成功登录后，facebook触发redirect_uri URL，用户再次进入应用程序。
问题是，ui-router（可能）替换了“？”路径中带有“#”，所以
http://localhost/fbauth?access_token=xxx&code=yyy
变成http://localhost/fbauth#access_token=xxx&code=yyy
因此，我不能使用$stateParams 来获取带有查询参数的对象。
令人惊讶的是，当我在浏览器中手动输入或单击链接时
http://localhost/fbauth?access_token=xxx&code=yyy
一切正常，并且 ui-router 不会替换 '?'带“#”。
我猜，这与重定向场景本身有关。
谁能指出我做错了什么，或者在这种情况下如何改变 ui-router 的行为？
这是处理 fb 重定向的状态：
.state('fbauth',
url: '/fbauth?access_token&code&expires_in',
templateUrl: 'static/public/public.html',
controller: 'publicCtrl'
);
PS ui-router 设置为在 html5 模式下使用$locationProvider.html5Mode(true);
【问题讨论】：
这是 UI 路由器的正确行为。它对将采用的参数类型非常具体，并希望更改您的 URL 或重新编写它。我们可以讨论重定向到不同 url 的优点......但更常见的做法是使用登录对话框和回调方法而不是 URL。 【参考方案1】：我不希望在客户端路由中传递查询参数（使用？标记）。相反，您可以按如下方式使用路由/状态参数：
http://localhost/#/fbauth/access_token/:access_token/code/:code
您可以使用$stateParams 访问这些值。例如($stateParams.access_token)
【讨论】：
不幸的是，正如我在问题中所写，我无法指定 URL 的格式，因为它是来自 facebook ouath 的重定向。 你能检查一下$location.search()['access_token'];，这可行吗【参考方案2】：
您可以将此解析函数添加到您的状态，它将用查询字符串 url 替换哈希 url：
resolve:
'urlFix': ['$location', function($location)
$location.url($location.url().replace("#","?"));
]
/fbauth#access_token=123456&code=abcde&expires_in=99999999 的网址会被自动重定向
成为/fbauth?access_token=123456&code=abcde&expires_in=99999999
$stateParams 将被正确填充。
值为access_token: "123456", code: "abcde", expires_in: "99999999"
如果位置已经匹配，$location.url() 不会更新，因此当不存在 # 时状态不会重定向。
完整示例代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<meta charset="utf-8">
<title>FBAUTH</title>
</head>
<body ng-app="app">
<base href="/">
<div ui-view></div>
<script>
angular.module('app', ['ui.router'])
.controller('publicCtrl', ['$scope','$stateParams', function($scope, $stateParams)
// $stateParams should be correctly set (even for hash route)
console.log($stateParams);
])
.config(['$locationProvider','$stateProvider', function($locationProvider, $stateProvider)
$stateProvider
.state("fbauth",
url: '/fbauth?access_token&code&expires_in',
templateUrl: 'fbauth.html',
controller: 'publicCtrl',
resolve:
'urlFix': ['$location', function($location)
$location.url($location.url().replace("#","?"));
]
);
$locationProvider.html5Mode(true);
]);
</script>
</body>
</html>
【讨论】：
非常感谢。这完美地工作。享受你的赏金:)。 @Jarema 谢谢，很高兴它有帮助。祝你的项目好运。 @Scott，如果我有这样的代码呢： $stateProvider .state('access_token', url: '/access_token=:access_token' controller: ($location, AccessToken) -> hash = $location.path().substr(1) AccessToken.setTokenFromString(hash) $location.path('/') $location.replace() templateUrl: '' 如何编辑这个来解决同样的问题？ @JCC 您从解析部分添加代码resolve: 'urlFix': ['$location', function($location) $location.url($location.url().replace("#","?")); ] 以上是关于angular-ui 替换'?'从 facebook oauth 重定向时带有“#”的主要内容，如果未能解决你的问题，请参考以下文章