angular-ui 替换'?'从 facebook oauth 重定向时带有“#" [英] angular-ui replace'?' with '#' on redirect from facebook oauth
问题描述
我在没有 SDK 的 angularjs 中实现 facebook ouath 登录.
I'm implementing facebook ouath login in angularjs without SDK.
除了一件事之外，一切都按预期进行.
Everything works as expected except one thing.
当用户点击登录按钮，重定向到facebook登录页面，成功登录后，facebook触发redirect_uri URL，用户再次进入应用程序.
When user click on login button, which redirects to facebook login page, after successfull login, facebook fires redirect_uri URL, and user is again in the app.
问题是，ui-router(可能)替换了?"路径中带有#"，所以
Problem is, that ui-router (probably) replaces '?' with '#' in path, so
http://localhost/fbauth?access_token=xxx&code=yyy
变成http://localhost/fbauth#access_token=xxx&code=yyy
因此，我不能使用 $stateParams 来获取带有查询参数的对象.
Because of that, i cannot use $stateParams to get object with query params.
令人惊讶的是，当我在浏览器中手动输入或单击链接时http://localhost/fbauth?access_token=xxx&code=yyy
一切正常，并且 ui-router 不会替换 '?'带#".
Suprisingly, when I manually enter in browser or click link to
http://localhost/fbauth?access_token=xxx&code=yyy
everything works properly, and ui-router does not replace '?' with '#'.
我猜，这与重定向场景本身有关.
I guess, that it's related to redirection scenario itself.
谁能指出我做错了什么，或者在这种情况下如何改变 ui-router 的行为?
Can someone point me what I do wrong, or how to change ui-router behaviour in this case?
这是处理 fb 重定向的状态:
This is the state, that handles fb redirect:
.state('fbauth', {
url: '/fbauth?access_token&code&expires_in',
templateUrl: 'static/public/public.html',
controller: 'publicCtrl'
});
PS ui-router 设置为在 html5 模式下使用 $locationProvider.html5Mode(true);
PS ui-router is set to work in html5 mode with $locationProvider.html5Mode(true);
推荐答案
您可以将此解析函数添加到您的状态，它将用查询字符串 url 替换哈希 url:
You can add this resolve function to your state, which will replace a hash url with the query string url:
resolve: {
'urlFix': ['$location', function($location){
$location.url($location.url().replace("#","?"));
}]
}
- 因此
/fbauth#access_token=123456&code=abcde&expires_in=99999999的 url 将被自动重定向 - 成为
/fbauth?access_token=123456&code=abcde&expires_in=99999999 $stateParams将正确填充.- 值为
{access_token: "123456", code: "abcde", expires_in: "99999999"}如果位置已经匹配， $location.url()不会更新，因此当不存在#时状态不会重定向.- So a url of
/fbauth#access_token=123456&code=abcde&expires_in=99999999would be redirected automatically - Becoming
/fbauth?access_token=123456&code=abcde&expires_in=99999999 $stateParamswould be populated correctly.- The value would be
{access_token: "123456", code: "abcde", expires_in: "99999999"} $location.url()doesn't update if the location matches already, so the state won't redirect when there is no#present.
<!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>
这篇关于angular-ui 替换'?'从 facebook oauth 重定向时带有“#"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
